拖动的效果实现

拖拉效果实现:
假如有两个div,拖动一个div到另一个div上面,松开鼠标时将两个div调换位置,这里假设两个div的width,height是一样的想问一下如何实现

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

1、自己写ondrag等
2、用web parts
3、找其它UI，像ext等
晕一下下, 这我都明白,拖拉实现比较容易,但是我想实现拖拉后的效果:假如有两个div,拖动一个div到另一个div上面,松开鼠标时将两个div调换位置,这里假设两个div的width,height是一样的想问一下思路
==========onmouseover onmouseup<div onmousedown="init()" onmousemove="moveit()" onmouseup="stopdrag()" style="position:absolute;left:120;top:50;width:100;height:150;border:1px solid #000000;z-index:2;background:#eeeeee">Layer 2</div>
<div onmousedown="init()" onmousemove="moveit()" onmouseup="stopdrag()" style="position:absolute;left:230;top:50;width:100;height:150;border:1px solid #000000;z-index:3;background:#eeeeee">Layer 3</div>
<div onmousedown="init()" onmousemove="moveit()" onmouseup="stopdrag()" style="position:absolute;left:120;top:50;width:100;height:150;border:1px solid #000000;z-index:2;background:#eeeeee">Layer 2 </div>
<div onmousedown="init()" onmousemove="moveit()" onmouseup="stopdrag()" style="position:absolute;left:230;top:50;width:100;height:150;border:1px solid #000000;z-index:3;background:#eeeeee">Layer 3 </div>
这问题的重点不是在拖拉方面,而是在拖拉后,div相互置换位置这个效果.不过你们的回答都是在针对拖拉方面的
给div添加position:absolute属性后，
然后动态互换left和top属性即可
docuemnt.getElementById("div1").style.left=docuemnt.getElementById("div2").style.left
docuemnt.getElementById("div1").style.top=docuemnt.getElementById("div2").style.top
呵呵,谢谢changke18,你的回答答到那个点了,我开始明白了.我想问一下,是否还有其他更好的方法,
我想实现类似google自定义主页的风格,不过有所改变,就是拖动后,不像它是将列上的div下移,我是想如我的问题一样,将两个div置换.有没有比较好的解决方法?
你所指的上面是指完全整个覆盖还是只有触边了就算上面？？
如果是完全覆盖则判断两个div的top和left是否相等如果是触边的话就通过被移动的div的top或者left是否在未被移动的div的left+width或者top+heigth范围内
如果满足上面的条件就互换位置【记得定义变量保存被移动的div的原来的left和top】
看看这个例子，在 1 楼
http://bbs.51js.com/viewthread.php?tid=65662支持 IE6 和 FF
通过"动态互换left和top属性",表现最明显的一个特征就是布局变乱了,
<div>
    <div id="div0"></div>
</div>
<div>
    <div id="div1"></div>
</div>假如是这种情况的话,这种置换就不能用了
docuemnt.getElementById("div1").innerHTML=docuemnt.getElementById("div2").innerHTML
你完成了div的互换了吗？我想学习一下，请教你，如果看到请加我qq，546071614，急需请教你