用JQuery 实现拖拽

2010-10-11 03:39:33 91 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

jQuery实现拖拽拖拽是在前端开发中，经常用到的一种使得目标文件位移的效果。其核心事件是鼠标的三个事件，mousedown(),mousemove(),mouseup(),通过改变目标绝对定位div的位置来实现拖动。这里分享我的代码，希望得到大神的指点。在文章的最后，将提供免费的代码资源，供和我一样的菜鸟学习。 HTML：点击移动 CS 阅读详情

用JQuery 实现各个模块的拖拽，像在www.163.com上输入账号密码跳转到的界面一样。
邮箱、博客、相册等模块的拖拽。给个例子，哥在线等。

...全文

光模块封装工艺简介光模块按照部件可以分为芯片、光器件、光模块三个层级;按照应用领域大概可分为电信应用、数通应用两个领域;按照内部器件的封装工艺可分为TO、Box、COB三大类。但是，无论是哪种类型的光模块，其生产工艺基本上可以分为封装、测试两大块。那什么叫做器件封装呢?我的理解器件封装就是利用胶水、焊料、机械、热量等手段把器件按照一定的先后次序结合形成一个整体的过程，就好像早上吃的煎饼，把面粉、鸡蛋、脆饼、烤肠、葱花等这些“器件”，按照一定的顺序，通过食用油、甜面酱、加热、卷起来等手段结合到一起，形成了美味的阅读详情

lpsky_123

JavaScript 87,983 成员 224,681 内容

+ 关注 + 加入社区

切换为时间正序

chl19871024 2010-10-11

打赏
举报

看下看下！

feiliubo 2010-10-11

打赏
举报

楼上的正解

shaoliang520xi 2010-10-11

打赏
举报

刚才是Jquery插件。现在这个是JS
/*
设置居中
*/
function setLayoutCenter(layerName){
document.getElementById(layerName).style.left=(document.body.clientWidth-240)/2;
var x = (document.getElementById(layerName).style.left).replace("px","");//浮动层固定于浏览器的x方向位置(从左往右)
var y = 150;//浮动层固定于浏览器的y方向位置(从上往下)
var diff = (parent.frames['mainFrame'].document.body.scrollTop + y - document.getElementById(layerName).style.posTop)*.20;
var y = parent.frames['mainFrame'].document.body.scrollTop + y - diff;
eval("document.all." + layerName + ".style.posTop = y");
eval("document.all." + layerName + ".style.posLeft = x");//移动层
}

/*
滚动条顶部高度
*/
function getScrollTopHeight() {
var scrollTopHeight = 0;
if (typeof window.pageYOffset != 'undefined') {
scrollTopHeight = window.pageYOffset;
}
else if (typeof window.document.compatMode != 'undefined' &&
window.document.compatMode != 'BackCompat') {
scrollTopHeight = window.document.documentElement.scrollTop;
}
else if (typeof window.document.body != 'undefined') {
scrollTopHeight = window.document.body.scrollTop;
}
return scrollTopHeight;
}
function getScrolls()
{
var sTop = 0, sLeft = 0, sWidth = 0, sHeight = 0;

sTop = (document.body.scrollTop > document.documentElement.scrollTop)? document.body.scrollTop:document.documentElement.scrollTop;
if( isNaN(sTop) || sTop <0 ){ sTop = 0 ;}

sLeft = (document.body.scrollLeft > document.documentElement.scrollLeft )? document.body.scrollLeft:document.documentElement.scrollLeft;
if( isNaN(sLeft) || sLeft <0 ){ sLeft = 0 ;}

return { sTop:sTop, sLeft: sLeft, sWidth: sWidth, sHeight: sHeight };
}
/*层居中*/
function setCenter(name){
var sc=getScrolls();
var h1 = document.body.clientHeight;
var h2 = document.documentElement.clientHeight;
var isXhtml = (h2<=h1&&h2!=0)?true:false; //判断当前页面的Doctype是否为Xhtml
var myBody = isXhtml?document.documentElement:document.body;
var yy=myBody.clientHeight;
var xx=myBody.clientWidth;
var myobj=document.getElementById(name);
var objhh=myobj.offsetHeight;
var objww=myobj.offsetWidth;
if(self!=top){
if(objhh>yy)
yy+=Math.abs(objhh-yy)+10;
}
myobj.style.position = "absolute";
myobj.style.top=(yy-objhh)/2 + sc.sTop + "px";
myobj.style.left=(xx-objww)/2 + "px";
}

/*
鼠标拖动层(可任意绑定DIV标签)
联系方式:1034555083/zhanghuiguoanlige@126.com
调用方法:var myDrag=new Endrag(source,target,offSetX, offSetY);
参数说明:source--鼠标动作绑定对象;target--操作目标对象(要移动的对象);offSetX--横坐标偏移;offSetY--纵坐标偏移
说明:通过多次调用本方法绑定多个对象的拖动
*/
funs={
index:1001,
getFocus:function (target){
if(target.style.zIndex!=this.index){
this.index += 2;
var idx = this.index;
target.style.zIndex=idx;
}
},
abs:function (element) {
var result = { x: element.offsetLeft, y: element.offsetTop};
element = element.offsetParent;
while (element) {
result.x += element.offsetLeft;
result.y += element.offsetTop;
element = element.offsetParent;
}
return result;
}
};
function dragDialog(source,target,offSetX, offSetY){
source=typeof(source)=="object" ? source:document.getElementById(source);
target=typeof(target)=="object" ? target:document.getElementById(target);
var x0=0,y0=0,x1=0,y1=0,moveable=false,index=100,NS=(navigator.appName=='Netscape');
offSetX=typeof offSetX== "undefined" ? 0:offSetX;
offSetY=typeof offSetY== "undefined" ? 0:offSetY;
source.onmousedown=function(e){
e = e ? e : (window.event ? window.event : null);
funs.getFocus(target);
if(e.button==(NS)?0 :1) {
if(!NS){this.setCapture()}
x0 = e.clientX ;
y0 = e.clientY ;
x1 = parseInt(funs.abs(target).x);
y1 = parseInt(funs.abs(target).y);
moveable = true;
}
};
//拖动;
source.onmousemove=function(e){
e = e ? e : (window.event ? window.event : null);
if(moveable){
target.style.left = (x1 + e.clientX - x0 - offSetX) + "px";
target.style.top = (y1 + e.clientY - y0 - offSetY) + "px";
}
};
//停止拖动;
source.onmouseup=function (e){
if(moveable) {
if(!NS){this.releaseCapture();}
moveable = false;
}
};
}

mask= function(){
var mybg;
return {
show:function(){
if(!mybg){
mybg = document.createElement("div");
mybg.setAttribute("id","maskBodyBg");
mybg.style.background = "#000";
mybg.style.width = "100%";
mybg.style.height = document.body.clientHeight + "px";
mybg.style.position = "absolute";
mybg.style.top = "0";
mybg.style.left = "0";
mybg.style.zIndex = "1000";
mybg.style.opacity = "0.3";
mybg.style.filter = "Alpha(opacity=30)";
document.body.style.overflow = "hidden";
document.body.appendChild(mybg);
}
mybg.style.display="block";
},
hide:function(){
var oBg=document.getElementById("maskBodyBg");
if(oBg)
oBg.style.display="none";
}
}
}();

shaoliang520xi 2010-10-11

打赏
举报

jquery.easydrag.handler.beta2.js
插件你百度一下就知道怎么用了

用JQuery 实现拖拽

相关推荐