拖动插件

 

var DragLib = window.DragLib = DragLib || {};
window.console = window.console || {};
console.log || (console.log = opera.postError);
(function($) {
DragLib.Drag = Drag;
var dv;
function Drag(name) {
//获取元素
var x = 0;
var y = 0;
var l = 0;
var t = 0;
var isDown = false;
//鼠标按下事件
$("#" + name).mousedown(function(e) {
isDown = true;
dv = document.getElementById(name);
var oEvent = e || event;
//获取x坐标和y坐标
x = oEvent.pageX;
y = oEvent.pageY;
//获取左部和顶部的偏移量
l = $(this).offset().left;
t = $(this).offset().top;
//开关打开
$(this).find("div").css("cursor", "move");
//设置样式  
});
$(document).mousemove(function(e) {
if(isDown == false) {
return false;
}
//获取x和y
var oEvent = e || event;
var nx = e.pageX;
var ny = e.pageY;
//计算移动后的左偏移量和顶部的偏移量
var L = nx - (x - l);
var T = ny - (y - t);
if(L < 0) {
L = 0;
} else if(L > document.documentElement.clientWidth - dv.offsetWidth) {
L = document.documentElement.clientWidth - dv.offsetWidth;
}
if(T < 0) {
T = 0;
} else if(T > document.documentElement.clientHeight - dv.offsetHeight) {
T = document.documentElement.clientHeight - dv.offsetHeight;
}
dv.style.left = L + 'px';
dv.style.top = T + 'px';
});
$(document).mouseup(function(e) {
//开关关闭
isDown = false;
$("#" + name).find("div").css("cursor", "default");
});
}

 

})(jQuery)

 

 

调用方式：new DragLib.Drag(标签ID名称);

 

 

欢迎访问：http://lhylyw.ngrok.xiaomiqiu.cn/   

免费下载各种课程设计和学习资源