I put down a drag-and-drop sort plug-in written by native js, because the plug-in itself is a PC-side method and all the methods are mouse operations. I changed it to the mobile method and found that the event in ontouchmove does not have the attributes of clientX and offsetX. What"s going on here? the code is as follows
<!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 -sharp999;
}
.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 -sharp999;
margin-bottom:10px;
background:-sharpccc;
box-sizing:border-box;
z-index: 777;
}
li.edit-able {
cursor:move;
border-style:dashed;
z-index: 777;
border-color:-sharpeee;
transition:all .3s ease;
}
.list li.move-item {
box-shadow:4px 4px 4px -sharpAAAAAA;
opacity:0.5;
}
button {
padding:0 10px;
height:30px;
margin-bottom:30px;
margin-right:10px;
border:none;
background:-sharpaaa;
cursor:pointer;
outline:none;
}
button.on {
background:-sharpeee;
}
.dashed-box {
position:absolute;
background:-sharpfff9c4;
border:1px dashed -sharpff9800;
box-sizing:border-box;
z-index:-1;
}
</style>
</head>
<body>
<div id="dd1" class="parent-box">
<button class="editOrder ddd" data-for="-sharpdd1"></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 class="px_hover">1
</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 class="px_hover">1
</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 class="px_hover">1
</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 class="px_hover">1
</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 class="px_hover">1
</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 class="px_hover">1
</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 class="px_hover">1
</li>
</ul>
</div>
<div id="dd2" class="parent-box">
<button class="editOrder" data-for="-sharpdd1"></button>
<!--<button class="save" data-for="-sharpdd1"></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;iPP){
for(var j = i + 1;j<save.length;jPP){
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;iPP){
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;iPP){
pxhtml = pxhtml+"<div style="padding-bottom: 7px;border-right: 1px solid -sharpf5f5f5;box-sizing: border-box;border-bottom: 1px solid -sharpf5f5f5;background: -sharpfff;">"+
"<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:-sharp333;">"+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; iPP) {
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; iPP) {
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; iPP) {
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; iPP) { //
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; iPP) { //
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"truefalse
// // 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; iPP) {
// if (tf) {
// this.li[i].className = "edit-able";
// } else {
// this.li[i].className = "";
// }
// }
// }
</script>
</body>
</html>