js html 交换位置,JS实现多个div块之间相互拖放，调换位置

#div1, #div2

{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}

function allowDrop(ev)

{

ev.preventDefault();

}

var srcdiv = null;

function drag(ev,divdom)

{

srcdiv=divdom;

ev.dataTransfer.setData("text/html",divdom.innerHTML);

}

function drop(ev,divdom)

{

ev.preventDefault();

if(srcdiv != divdom){

srcdiv.innerHTML = divdom.innerHTML;

divdom.innerHTML=ev.dataTransfer.getData("text/html");

}

}

ni hao!

Hello world!

上面是代码，保存为html，然后用浏览器打开，可以查看效果。

简要说一下，上面的函数：

ondrop: 拖到目的地放下之后要做的处理，这里自定义drop(event,this)函数,互换两个的innerHTML

ondragover:当拖动链接等有默认事件的元素时，要在ondragover事件中用ev.preventDefault()阻止默认事件。否则drop事件不会触发。

draggable:允许拖动

ondragstart:选取拖动目标要做的处理，这里保存拖动目标的innerHTML.