关于PC端与手机端随着手指移动图片位置放生变化的拖拽事件

当按下鼠标时，图片随鼠标移动松开时图片回到原位

drag("div_id")

function drag(node_id){

var node = document.getElementById(node_id);

var isYes = false;

document.onmousedown = function(even){

isYes = true;

var e = even || window.event;

node.style.left = e.clientX - 30 + "px";

node.style.top = e.clientY - 30 + "px";

}

document.onmousemove = function(even){

var e = even || window.event;

if(isYes){

node.style.left = e.clientX - 30 + "px";

node.style.top = e.clientY - 30 + "px";

}

}

document.onmouseup = function(){

isYes = false;

node.style.left = 0 + "px";

node.style.top = 0 + "px";

}

}

以下为在手机端的移动事件的函数封装

function drag(node_id){
var node = document.getElementById(node_id);
var isYes = false;
document.ontouchstart = function(even){
isYes = true;
var e = even || window.event;
node.style.left = e.clientX - 30 + "px";
node.style.top = e.clientY - 30 + "px";
}
document.ontouchmove = function(even){
var e = even || window.event;
if(isYes){
node.style.left = e.clientX - 30 + "px";
node.style.top = e.clientY - 30 + "px";
}
}
document.ontouchend = function(){
isYes = false;
node.style.left = 0 + "px";
node.style.top = 0 + "px";
}
}

以上为PC端与手机端的类似拖拽的函数封装