如何让div可以拖动(如何实现div拖拽和上下移动)

如何让div可以拖动,如何实现div拖拽和上下移动

内容导航：

如何让DIV可编辑可拖动

怎么做javascript拖动div并且有对齐来对齐

如何保存div拖动层

div 拖动怎么实现

一、如何让DIV可编辑可拖动

可编辑var divTitle=$(‘#move’);[html] view plaincopy().click(function () {
$(this).draggable({ disabled: false }); $(this).css(‘backgroundColor’,
‘transparent’); }).dblclick(function () { $(this).draggable({ disabled: true
}); $(this).css(‘backgroundColor’, ‘#FFFF6F’);
});1、可编辑：可编辑设置contenteditable属性可以让div编程可编辑状态2、可拖动：$(‘#move’).draggable();使用jquery
ui的draggable可以让div变成可拖动状态，但是如果两个属性同时应用就会出现可编辑功能失效的状况。
3、可编辑、可拖动：可编辑var divtitle=$(‘#move’);[html] view plain copy().click(function
() { $(this).draggable({ disabled: false }); $(this).css(‘backgroundcolor’,
‘transparent’); }).dblclick(function () { $(this).draggable({ disabled: true
}); $(this).css(‘backgroundcolor’, ‘#ffff6f’); });
这样控制一下就可以让div同时具有edit和drag属性了。

二、怎么做javascript拖动div并且有对齐来对齐

您好：这个就是类似于QQ主页或者淘宝卖家自定义首页那种自定义模块一样。这个可不是一句两句代码就能实现的。得写一个专门用来布局的插件才可以。我记得一些jquery框架中是有的。DWZ或者LigerUI等。你去看看吧。
个人思路：拖动DIV这个效果都好做。关键是如何和临近的DIV对齐。这就需要在拖动的时候动态去计算。
计算此时页面上总共有多少DIV，并且每个div因为形状不规则，可以统一用每个DIV容器中心点坐标来定。拖动的时候来计算拖动的DIV中心位置，离着哪个DIV中心位置最近。然后把对应DIV的长宽显示延长线，也就是对齐线。只有把拖动的DIV放到延长线中的区域超过一半的时候才，让DIV的位置与对齐对象放到一起。这个地方也是需要计算的。
我想很多框架中也是来这么计算的。如果你的每个DIV都很规则，并且拖动的DIV高宽都和对齐对象相符，那就更简单了。

三、如何保存div拖动层

答：＜html＞＜head＞＜metahttp-equiv=“Content-
Type“content=“text/html;charset=gb2312“/＞＜style＞body{margin:0px;padding:0px;font-
size:12px;text-align:center;}body＞div{text-align:center;margin-
right:auto;margin-
left:auto;}.content{width:900px;}.content.left{float:left;width:20%;border:1pxsolid＃FF0000;margin:3px;}.content.center{float:left;border:1pxsolid＃FF0000;margin:3px;width:57%}.content.right{float:right;width:20%;border:1pxsolid＃FF0000;margin:3px}.mo{height:auto;border:1pxsolid＃CCC;margin:3px;background:＃FFF}.moh1{background:＃ECF9FF;height:18px;padding:3px;cursor:move}.closediv{cursor:default;}.minusspan{cursor:default;}.{height:80px;border:1pxsolid＃F3F3F3;margin:2px}h1{margin:0px;padding:0px;text-
align:left;font-
size:12px}.dragging{FILTER:progid:(opacity=60);opacity:0.6;moz-
opacity:0.6}＜/style＞＜scriptlanguage=“javascript“＞/ikaiser@2007-1-11改动1、添加拖动层时的虚线框2、添加拖动层时的半透明效果3、加入层折叠和关闭功能具体的代码改动我已经在代码中标出/vardragobj={}=function(){returnfalse}vardomid=12functionon_ini(){c=function(s){returndexOf(s)＞-1?true:false}varagent=erAgentOpr=c(“Opera“)IE=c(“IE“)＆＆!isOprMoz=c(“Mozilla“)＆＆!isOpr＆＆!isIEif(isMoz){totype.defineGetter(“x“,function(){returnientX+2})totype.defineGetter(“y“,function(){returnientY+2})}basic_ini()}functionbasic_ini(){window.$=function(obj){returntypeof(obj)==“string“?tElementById(obj):obj}=function(obj){if($(obj)!=null){$(obj).moveChild($(obj))}}}=function(obj){if($(obj)!=null){$(obj).moveChild($(obj))}}=function(){on_ini()varo=tElementsByTagName(“h1“)for(vari=0;i＜;i++){o[i].onmousedown=addevent;//添加折叠和关闭按钮vartt=eateElement(“div“);=“float:left“;varspan=eateElement(“span“);nerHTML=“–“+o[i].innerHTML;=“cursor:default;“;wn=minusDiv;ld(span);varclose=eateElement(“div“);nerHTML=“X“;=“cursor:default;float:right“;wn=closeDiv;o[i].innerHTML=““;o[i].appendChild(tt);o[i].appendChild(close);}}//折叠或者显示层functionminusDiv(e){e=e||eventvarnr=xtSibling;//取得内容层===““?“none“:““;}//移出层functioncloseDiv(e){e=e||eventvarmdiv=rentNode;//取得目标层oDel(mdiv);}functionaddevent(e){if(dragobj.o!=null)returnfalsee=e||eventdragobj.o=rentNode=getxy(dragobj.o)=newArray(([1]),([0]))//assName=‘dragging‘;=[2]+“px“=[3]+“px“=([0])+“px“p=([1])+“px“=“absolute“lter=‘alpha(opacity=60)‘;//添加拖动透明效果varom=eateElement(“div“)=om=[2]+“px“=[3]+“px“rder=“1pxdashedred“;//ikaiser添加，实现虚线框sertBefore(om,dragobj.o)returnfalse}tart=function(){returnfalse}=function(){()}=function(){()}=function(){if(dragobj.o!=null){=“auto“=“auto“sertBefore(dragobj.o,)=““oDel()dragobj={}}}ve=function(e){e=e||eventif(dragobj.o!=null){=([0])+“px“p=([1])+“px“createtmpl(e,dragobj.o)//传递当前拖动对象}}functiongetxy(e){vara=newArray()vart=;varl=t;varw=th;varh=ght;while(e=ent){t+=;l+=t;}a[0]=t;a[1]=l;a[2]=w;a[3]=hreturna;}functioninner(o,e){vara=getxy(o)if(e.x＞a[1]＆＆e.x＜(a[1]+a[2])＆＆e.y＞a[0]＆＆e.y＜(a[0]+a[3])){if(e.y＜(a[0]+a[3]/2))return1;elsereturn2;}elsereturn0;}//将当前拖动层在拖动时可变化大小，预览效果functioncreatetmpl(e,elm){for(vari=0;i＜domid;i++){if(tElementById(“m“+i)==null)//已经移出的层不再遍历continue;if($(“m“+i)==dragobj.o)continuevarb=inner($(“m“+i),e)if(b==0)continue=$(“m“+i).offsetWidth=$(“m“+i).offsetWidth;//1为下移，2为上移if(b==1){$(“m“+i).sertBefore(,$(“m“+i))}else{if($(“m“+i).nextSibling==null){$(“m“+i).ld()}else{$(“m“+i).sertBefore(,$(“m“+i).nextSibling)}}return}for(varj=0;j＜3;j++){if($(“dom“+j).c(“div“)||$(“dom“+j).c(“DIV“))continuevarop=getxy($(“dom“+j))if(e.x＞(op[1]+10)＆＆e.x＜(op[1]+op[2]-10)){$(“dom“+j).appendChild()=(op[2]-10)+“px“}}}functionadd_div(){varo=eateElement(“div“)assName=“mo“=“m“+domid$(‘dom0‘).appendChild(o)nerHTML=“＜h1＞dom“+domid+“＜/h1＞＜divclass=nr＞＜/div＞“tElementsByTagName(“h1“)[0].onmousedown=addeventdomid++}＜/script＞＜/head＞＜body＞＜INPUTTYPE=“button“value=“添加DIV“onclick=“add_div();“＞＜divclass=content＞＜divclass=leftid=dom0＞＜divclass=moid=m0＞＜h1＞dom0＜/h1＞＜divclass=“nr“＞＜/div＞＜/div＞＜divclass=moid=m1＞＜h1＞dom1＜/h1＞＜divclass=“nr“＞＜/div＞＜/div＞＜divclass=moid=m2＞＜h1＞dom2＜/h1＞＜divclass=“nr“＞＜/div＞＜/div＞＜divclass=moid=m3＞＜h1＞dom3＜/h1＞＜divclass=“nr“＞＜/div＞＜/div＞＜/div＞＜divclass=centerid=dom1＞＜divclass=moid=m4＞＜h1＞dom4＜/h1＞＜divclass=“nr“＞＜/div＞＜/div＞＜divclass=moid=m5＞＜h1＞dom5＜/h1＞＜divclass=“nr“＞＜/div＞＜/div＞＜divclass=moid=m6＞＜h1＞dom6＜/h1＞＜divclass=“nr“＞＜/div＞＜/div＞＜divclass=moid=m7＞＜h1＞dom7＜/h1＞＜divclass=“nr“＞＜/div＞＜/div＞＜/div＞＜divclass=rightid=dom2＞＜divclass=moid=m8＞＜h1＞dom8＜/h1＞＜divclass=“nr“＞＜/div＞＜/div＞＜divclass=moid=m9＞＜h1＞dom9＜/h1＞＜divclass=“nr“＞＜/div＞＜/div＞＜divclass=moid=m10＞＜h1＞dom10＜/h1＞＜divclass=“nr“＞＜/div＞＜/div＞＜divclass=moid=m11＞＜h1＞dom11＜/h1＞＜divclass=“nr“＞＜/div＞＜/div＞＜/div＞＜/div＞＜/body＞＜/html＞

四、div 拖动怎么实现

我要的是提交表单的弹出层拖动？

div 层 打开+关闭+ 拖动+遮罩+移动+动画改变高宽 兼容ie ff

代码： /

这些都是可拖动对象

这是示例代码