关于JavaScript元素拖拽的一个简单的例子

最近再做一个项目，用到了javascript中的拖拽，本来就对javascript中的事件不是特别熟悉，对于拖拽更是一知半解，现在在网上找到了一个简单的拖拽的例子，觉得很不错，先摘录下来，希望对对拖拽同样有困惑的朋友们有所帮助。

1.定义一个被拖拽的对象:
<img id="drag1"src="static/images/1.jpg"draggable="true"οndragstart="drag(event)" width="200px" height="200px">
这里面有个属性draggable="true",表示这个img元素允许被拖拽到其他地方。ondragstart是一个事件，用来处理我们想要的事情，比如说拖拽的时候传递一些信息等等。
2.定义一个允许被拖入其中的区域，这里用一个div来表示：
<div id="div" οndrοp="drop(event)" οndragοver="allowDrop(event)" style="width:200px;height:200px;border:1px solid red;"></div>
这里面有个ondrop事件，表示拖拽的元素落入这个区域的时候发生的事情。比如可以接收来传递过来的信息，并对信息进行处理。ondragover事件指的是被拖拽元素出现在目的区域的上面的时候发生的事情。也可以定义自己的逻辑。
3.有了上面的两个元素，下面就开始用javascript函数来处理各个事件了。
function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
参照上面的img,div连个元素中定义的事件，这几个函数就不难看懂了。而且还能处理传递过来的信息。

以上部分内容参考自www.w3cschool.cc网站。