jQuery动态添加可拖动元素完整实例(附demo源码下载)

var posX;
var posY;
var dragable;
if (typeof obj == "string")
obj = document.getElementById(obj);
if(initWidth)obj.style.width = initWidth + "px";
if(initHeight)obj.style.height = initHeight + "px";
if(initLeft)obj.style.left = initLeft + "px";
if(initTop)obj.style.top = initTop + "px";
obj.onmousedown = function(event){
down(event);
}
obj.onmouseup = function(){
up();
}
function down(e){
e = e || window.event;
posX = e.clientX - obj.offsetLeft; //offsetLeft is a readonly property
posY = e.clientY - obj.offsetTop;
dragable = true;
document.onmousemove = move;
//$(obj).wrap("<div style = 'position:relative;border:1px solid red;width:300px;height:50px'></div>")
}
function move(ev){
if (dragable) {
ev = ev || window.event;//如果是IE
obj.style.left = (ev.clientX - posX) + "px";
obj.style.top = (ev.clientY - posY) + "px";
}
}
function up(){
//$(obj).unwrap();
dragable = false;
};
}

完整实例代码点击此处本站下载。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。