您的位置:首页 > Web前端 > JavaScript

Web 拖拽 js 代码

2013-07-03 18:13 106 查看
*js代码 要求:被拖拽的对象 class="dragme"

如:<img src="" class ='dragme' /> <input type='text' class='dragme' /> 其中css .dragme{position:relative;}

注意:浏览器的版本类型会影响拖拽功能的实现。 解决: 把html文件里的<!DOCTYPE > 里的其他内容删除 或干脆不要 <!DOCTYPE >

var ie = document.all;

var nn6 = document.getElementById && !document.all;

var isdrag = false;

var x, y;

var dobj;

function movemouse(e) {

if (isdrag) {

dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;

dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;

return false;

}

}

function selectmouse(e) {

var fobj = nn6 ? e.target : event.srcElement;

var topelement = nn6 ? "HTML" : "BODY";

while (isdrag && fobj.tagName != topelement && fobj.className != "dragme") {

fobj = nn6 ? fobj.parentNode : fobj.parentElement;

}

if (fobj.className == "dragme") {

isdrag = true;

dobj = fobj;

tx = parseInt(dobj.style.left + 0);

ty = parseInt(dobj.style.top + 0);

x = nn6 ? e.clientX : event.clientX;

y = nn6 ? e.clientY : event.clientY;

document.onmousemove = movemouse;

return false;

}

}

document.onmousedown = selectmouse;

document.onmouseup = new Function("isdrag=false");
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: