问题描述
- 已实现js拖拽一张图片，怎么实现多图片拖拽就出错？
-
<!doctype html>drag
//会出错var dragImg = document.getElementById("dragImg");
startDrag(dragImg);var Img = document.getElementById("Img");
startDrag（Img);//会出错js的startDrag函数代码如下
var params = {
left: 0,
top: 0,
currentX: 0,
currentY: 0,
flag: false
};
//获取相关CSS属性
var getCss = function (o, key) {
return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o, false)[key];
};//拖拽的实现
var startDrag = function (target, callback) {
if (getCss(target, "left") !== "auto") {
params.left = getCss(target, "left");
}
if (getCss(target, "top") !== "auto") {
params.top = getCss(target, "top");
}
//o是移动对象
target.onmousedown = function (event) {
params.flag = true;
if (!event) {
event = window.event;
event.preventDefault();
//防止IE文字选中
target.onselectstart = function () {
return false;
}
}
var e = event;
e.preventDefault();
params.currentX = e.clientX;
params.currentY = e.clientY;
};
document.onmouseup = function () {
params.flag = false;
if (getCss(target, "left") !== "auto") {
params.left = getCss(target, "left");
}
if (getCss(target, "top") !== "auto") {
params.top = getCss(target, "top");
}
};
document.onmousemove = function (event) {
var e = event ? event : window.event;
if (params.flag) {
var nowX = e.clientX, nowY = e.clientY;
var disX = nowX - params.currentX, disY = nowY - params.currentY;
target.style.left = parseInt(params.left) + disX + "px";
target.style.top = parseInt(params.top) + disY + "px";
}if (typeof callback == "function") { callback(parseInt(params.left) + disX, parseInt(params.top) + disY); } }};