极客观点
项目管理
HarmonyOS
我下了一个原生js写的拖拽排序插件 因为插件本身是pc端的 方法都是鼠标操作 我改成了移动端的方法发现ontouchmove 里的event没有clientX 和offsetX这一类型的属性 请问这个是怎么回事 代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>原生js面向对象拖拽排序-jq22.com</title>
<style>
html,body{width: 100%;margin: 0;padding: 0}
.parent-box {
width:100%;
float:left;
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
}
.list {
width:100%;
padding:0;
margin:0;
position:relative;
padding-bottom:0;
border:1px solid #999;
}
.list .px_hover{position: absolute; right: 0;margin: 0;top:0;width: 30px;height: 100%;z-index: 8888}
.list p {float: left;}
.list li {
display:block;
width:100%;
height:50px;
border:1px solid #999;
margin-bottom:10px;
background:#ccc;
box-sizing:border-box;
z-index: 777;
}
li.edit-able {
cursor:move;
border-style:dashed;
z-index: 777;
border-color:#eee;
transition:all .3s ease;
}
.list li.move-item {
box-shadow:4px 4px 4px #AAAAAA;
opacity:0.5;
}
button {
padding:0 10px;
height:30px;
margin-bottom:30px;
margin-right:10px;
border:none;
background:#aaa;
cursor:pointer;
outline:none;
}
button.on {
background:#eee;
}
.dashed-box {
position:absolute;
background:#fff9c4;
border:1px dashed #ff9800;
box-sizing:border-box;
z-index:-1;
}
</style>
</head>
<body>
<div id="dd1" class="parent-box">
<button class="editOrder ddd" data-for="#dd1">编辑顺序</button>
<button id="save" onclick="save1()">保存</button>
<ul class="list ee" id="li_pxx">
<li data-click="getData(this, 'action','wodeshenqing');">
<img style="height: 45px;width: 57px;margin-bottom:5px" src="../../renli/images/xiujia_@2x.gif"/>
<p class="px_text1">我的休假</p><p class="px_hover">1</p>
</li>
<li data-click="getData(this, 'action','wodeyiban');">
<img style="height: 45px;width: 57px;margin-bottom:5px" src="../../renli/images/yiban@2x.gif"/>
<p class="px_text1">我的已办</p><p class="px_hover">1</p>
</li>
<li data-click="getData(this, 'action','wodejianli');">
<img style="height: 45px;width: 57px;margin-bottom:5px" src="../../renli/images/jianli_@2x.gif"/>
<p class="px_text1">我的简历</p><p class="px_hover">1</p>
</li>
<li data-click="getData(this, 'action','wodepeixun');">
<img style="height: 45px;width: 57px;margin-bottom:5px" src="../../renli/images/peixun_@2x.gif"/>
<p class="px_text1">我的培训</p><p class="px_hover">1</p>
</li>
<li data-click="getData(this, 'action','wode_tuandui');">
<img style="height: 45px;width: 57px;margin-bottom:5px" src="../../renli/images/tuandui_@2x.gif"/>
<p class="px_text1">我的团队</p><p class="px_hover">1</p>
</li>
<li data-click="getData(this, 'action','wodexinxi');">
<img style="height: 45px;width: 57px;margin-bottom:5px" src="../../renli/images/xinxi_@2x.gif"/>
<p class="px_text1">我的信息</p><p class="px_hover">1</p>
</li>
<li data-click="getData(this, 'action','chaxunxiaoxi');">
<img style="height: 45px;width: 57px;margin-bottom:5px " src="../../renli/images/kaoqin_@2x.gif"/>
<p class="px_text1">我的考勤</p><p class="px_hover">1</p>
</li>
</ul>
</div>
<div id="dd2" class="parent-box">
<button class="editOrder" data-for="#dd1">编辑顺序</button>
<!--<button class="save" data-for="#dd1">保存</button>-->
<ul class="list">
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
<li>07</li>
<li>08</li>
<li>09</li>
<li>10</li>
</ul>
</div>
<script>
//封装设置css属性方法
function setCss(obj, cssList) {
for (var attr in cssList) {
obj.style[attr] = cssList[attr];
}
}
function save1(){
var save = document.getElementById("dd1").querySelectorAll("li")
save = Array.prototype.slice.call(save)
for(var i=0;i<save.length;i++){
for(var j = i + 1;j<save.length;j++){
var savei = parseInt(save[i].getAttribute("data-top"))
var savej = parseInt(save[j].getAttribute("data-top"))
if(savei>savej){
var tmp = save[i];
save[i] = save[j];
save[j] = tmp;
}
}
}
console.log(save)
var arre = [];
var arre1 =[];
for(var i=0;i<save.length;i++){
var on1 = save[i].getAttribute("data-click");
var img1 = save[i].querySelectorAll("img")[0].src;
var text1 = save[i].querySelectorAll(".px_text1")[0].innerHTML
console.log(on1)
console.log(img1)
console.log(text1)
arre1.push({'click':on1,'img':img1,'name':text1})
arre.push(save[i].outerHTML)
}
var pxhtml= "";
for(var i=0;i<arre1.length;i++){
pxhtml = pxhtml+'<div style="padding-bottom: 7px;border-right: 1px solid #f5f5f5;box-sizing: border-box;border-bottom: 1px solid #f5f5f5;background: #fff;">'+
'<a style="height: 70px;margin: 10px auto 0px;width:57px" class="ui-grid-icon" data-active="true" data-transition="slide-left" onclick="'+ arre1[i].click+'"data-target="blank">'+
'<img style="height: 45px;width: 57px;margin-bottom:5px" src="'+arre1[i].img+'"/>'+
'<span style="width: 57px;height: 25px;position: relative;float: left;line-height: 25px;margin-left: 0px;margin-top: 0px;color:#333;">'+arre1[i].name+'</span>'+
'</a>'+
'</div>'
}
console.log(pxhtml)
// console.log(JSON.stringify(save))
localStorage.setItem('li_px',JSON.stringify(arre));
}
//封装类名操作
//增加类名
function addClass(obj, _classname) {
var classNames = obj.className //获取当前按钮的class,返回的是字符串
var tf = classNames.search(_classname) >= 0 ? true : false; //查找匹配的类名位置，如果返回-1说明没有这个类名， classNames.search(_classname)>=0 == false
if (!tf) {
classNames = classNames + ' ' + _classname;
obj.className = classNames;
}
}
//删除类名
function removeClass(obj, _classname) {
var classNames = obj.className.split(' ');
var index = classNames.indexOf(_classname);
classNames.splice(index, 1);
classNames = classNames.toString().replace(',', ' ');
obj.className = classNames;
}
//var parentBox;
window.onload = function() {
//init();
if(localStorage.getItem("li_px")){
var read=JSON.parse(localStorage.getItem("li_px"))
// read = JSON.stringify(read)
document.getElementById("li_pxx").innerHTML=read
}
var dd1 = new DragDrop('dd1');
var dd2 = new DragDrop('dd2');
dd1.init();
dd2.init();
}
function DragDrop(id) {
this.parentBox = document.getElementById(id)
this.editSwith = this.parentBox.querySelector('.editOrder');
this.save = this.parentBox.querySelector('.save');
this.list = this.parentBox.querySelector('.list');
this.li = this.list.querySelectorAll('li');
this.p = this.list.querySelectorAll('p');
this.aPosXY = []; //原始位置
this.aPosXYClone = [];
this.moveStatus = true; //移动状态
this.editAble = true; //编辑状态
this.dashedBox = null;
this.moveItem = null;
this.moveItemH = null;
this.mouseDownPos = [];
this.inScope = false;
}
DragDrop.prototype.init = function() {
var _this = this;
this.list.style.height = this.li.length * (this.li[0].offsetHeight + parseInt(document.defaultView.getComputedStyle(this.li[0]).marginBottom)) + 'px';
for (var i = 0; i < this.li.length; i++) {
var posXY = [];
var posX = this.li[i].offsetLeft; //获取当前元素相对父级元素的偏移量 x；
var posY = this.li[i].offsetTop; //获取当前元素相对父级元素的偏移量 y；
posXY.x = posX + 'px';
posXY.y = posY + 'px';
this.aPosXY.push(posXY);
this.li[i].setAttribute('data-index', i)
}
for (var i in this.aPosXY) {
setCss(this.li[i], {
'position': 'absolute',
'left': 0,
'top': this.aPosXY[i].y
})
}
this.editSwith.onclick = function() {
_this.edit();
}
for (var i = 0; i < this.li.length; i++) {
this.li[i].onmousedown = function(event, t) {
if (_this.editAble) {
console.log(event)
// console.log(window.event.clientX); //鼠标位置
// console.log(document.body.clientWidth) //屏幕宽度
var WI = window.event.clientX+30
if(WI>document.body.clientWidth){
_this.mouseDown(event, this);
}
}
}
this.li[i].ontouchend = function() {
if (_this.editAble) {
_this.moveStatus = false; //关闭可移动状态
_this.mouseUp(_this.moveItem);
}
}
}
// 在li里移动触发 就是这个里面的event缺少一些属性
this.list.ontouchmove =function(event) {
console.log(event)
if (_this.moveStatus) {
console.log(_this.moveItem)
_this.mouseMove(event, _this.moveItem);
}
}
}
//鼠标移动
DragDrop.prototype.mouseMove = function(e, obj) {
var relativeListX = e.pageX - this.list.offsetLeft; //鼠标相对ul的位置 x
var relativeListY = e.pageY - this.list.offsetTop; //鼠标相对ul的位置 y
var objIndex = obj.getAttribute('data-index');
//获取当前选中元素的下标
var objLeft = this.aPosXY[objIndex].x;
var objTop = this.aPosXY[objIndex].y; //根据下标获取当前选中元素 固定的时候的定位 x,y;
// console.log('objLeft：'+objLeft+' objTop：'+objTop); // objLeft：10px objTop：10px
var relativeObjX = this.mouseDownPos.x - parseInt(objLeft); //鼠标按下时鼠标相对于选中元素的位置x
var relativeObjY = this.mouseDownPos.y - parseInt(objTop); //鼠标按下时鼠标相对于选中元素的位置y
var objMoveX = relativeListX - relativeObjX;
var objMoveY = relativeListY - relativeObjY;
// console.log(objMoveX +' '+objMoveY)
// console.log('x:'+relativeListX+' y:'+relativeListY);
// console.log('x:'+relativeObjX+' y:'+relativeObjY);
setCss(obj, {
'left': objMoveX + 'px',
'top': objMoveY + 'px'
});
for (var i = 0; i < this.aPosXYClone.length; i++) {
if (!(i == objIndex)) {
if (objMoveY + obj.offsetHeight >= parseInt(this.aPosXYClone[i].y) + this.li[i].offsetHeight / 2 && objMoveY + obj.offsetHeight < parseInt(this.aPosXYClone[i].y) + this.li[i].offsetHeight || objMoveY >= parseInt(this.aPosXYClone[i].y) && objMoveY < parseInt(this.aPosXYClone[i].y) + this.li[i].offsetHeight / 2) {
// console.log(i);
var ts = [];
ts.x = this.dashedBox.style.left;
ts.y = this.dashedBox.style.top;
this.aPosXYClone[objIndex] = this.aPosXYClone[i];
this.aPosXYClone[i] = ts;
setCss(this.dashedBox, {
'left': this.aPosXYClone[objIndex].x,
'top': this.aPosXYClone[objIndex].y
});
setCss(this.li[i], {
'left': ts.x,
'top': ts.y
});
// console.log(this.aPosXYClone)
// console.log(this.aPosXY)
return false;
}
}
}
}
//鼠标弹起
DragDrop.prototype.mouseUp = function(t) {
if (this.moveItem) {
this.list.removeChild(this.dashedBox)
this.moveItem.style.zIndex = null;
removeClass(t, 'move-item');
this.aPosXY.splice(0, this.aPosXY.length);;
for (var i = 0; i < this.aPosXYClone.length; i++) { //复制数组
this.aPosXY.push(this.aPosXYClone[i]);
}
for (var i in this.aPosXY) {
setCss(this.li[i], {
'position': 'absolute',
'left': this.aPosXY[i].x,
'top': this.aPosXY[i].y
})
this.li[i].dataset.top=parseInt(this.aPosXY[i].y)
}
this.moveItem = null;
}
}
//鼠标按下
DragDrop.prototype.mouseDown = function(e, t) {
var thisIndex = t.getAttribute('data-index'); //获取当前序号，
this.dashedBox = document.createElement('div'); //创建新元素
var tWidth = t.offsetWidth + 'px'; //获取当前点击元素宽
var tHeight = t.offsetHeight + 'px'; //设置新元素高等于当前点击元素高
this.dashedBox.className = 'dashed-box'; //为新元素增加类名
setCss(this.dashedBox, {
'width': tWidth,
'height': tHeight,
'left': this.aPosXY[thisIndex].x,
'top': this.aPosXY[thisIndex].y
});
this.list.appendChild(this.dashedBox);
//console.log(tWidth+' '+tHeight);
//console.log(thisIndex);
this.moveStatus = true; //开启可移动状态
this.moveItem = t; //当前移动的元素
this.mouseDownPos.x = e.pageX - this.list.offsetLeft;
this.mouseDownPos.y = e.pageY - this.list.offsetTop;
t.style.zIndex = 100;
addClass(t, 'move-item');
this.moveItemH = t.offsetHeight;
this.aPosXYClone.splice(0, this.aPosXYClone.length);
for (var i = 0; i < this.aPosXY.length; i++) { //复制数组
this.aPosXYClone.push(this.aPosXY[i]);
}
removeClass(t, 'edit-able');
}
// //编辑按钮
// DragDrop.prototype.edit = function() {
// var classNames = this.editSwith.className; //获取当前按钮的class,返回的是字符串
// var aClassNames = classNames.split(' '); //将获取的class字符串用用空格切割，返回类名数组
// var index = aClassNames.indexOf('on'); //获取类名 'on'的位置
// // console.log(index);
// var tf = index >= 0 ? true : false; //如果index>=0说明存在类名 'on'，返回true，否则返回false
// // console.log(tf);
// if (!tf) {
// this.editSwith.className = classNames + ' on'; //如果类名'on'不存在；添加类名'on';
// this.editAble = true; //可编辑状态
// } else {
// aClassNames.splice(index, 1); //否则从类名数组中删除'on'；
// this.editSwith.className = aClassNames.toString().replace(',', ' '); //将删除后的数组转换成字符串，并共空格（' '）代替逗号（','），从新设置类名
// this.editAble = false; //不可编辑状态
// }
// this.setClass(!tf);
// console.log(this.editAble == true ? '可编辑' : '不可编辑');
// }
//
// //初始化元素css
// DragDrop.prototype.setClass = function(tf) {
// for (var i = 0; i < this.li.length; i++) {
// if (tf) {
// this.li[i].className = 'edit-able';
// } else {
// this.li[i].className = '';
// }
// }
// }
</script>
</body>
</html>