在Web开发中，我们要实现拖放效果，需要借助Javascript。今天让我们使用Html5实现它：
先看html核心代码:
draggable属性是html5新增加的，它有三个值true,false,auto. true是可以拖，false是不可以，auto由用户浏览器是否支持而定。更多请可以参考官方文档.
加上一点儿样式:
然后我们来看javascript:
1: function listenEvent(eventTarget, eventType, eventHandler) {
2: if (eventTarget.addEventListener) {
3: eventTarget.addEventListener(eventType, eventHandler,false);
4: } else if (eventTarget.attachEvent) {
5: eventType = "on" + eventType;
6: eventTarget.attachEvent(eventType, eventHandler);
7: } else {
8: eventTarget["on" + eventType] = eventHandler;
9: }
10: }
11:
12: // cancel event
13: function cancelEvent (event) {
14: if (event.preventDefault) {
15: event.preventDefault();
16: } else {
17: event.returnValue = false;
18: }
19: }
20:
21: // cancel propagation
22: function cancelPropagation (event) {
23: if (event.stopPropagation) {
24: event.stopPropagation();
25: } else {
26: event.cancelBubble = true;
27: }
28: }
29:
30: window.onload=function() {
31: var target = document.getElementById("drop");
32: listenEvent(target,"dragenter",cancelEvent);
33: listenEvent(target,"dragover", dragOver);
34: listenEvent(target,"drop",function (evt) {
35: cancelPropagation(evt);
36: evt = evt || window.event;
37: evt.dataTransfer.dropEffect = 'copy';
38: var id = evt.dataTransfer.getData("Text");
39: target.appendChild(document.getElementById(id));
40: });
41:
42: var item = document.getElementById("item");
43: item.setAttribute("draggable", "true");
44: listenEvent(item,"dragstart", function(evt) {
45: evt = evt || window.event;
46: evt.dataTransfer.effectAllowed = 'copy';
47: evt.dataTransfer.setData("Text",item.id);
48: });
49:
50: };
51:
52: function dragOver(evt) {
53: if (evt.preventDefault) evt.preventDefault();
54: evt = evt || window.event;
55: evt.dataTransfer.dropEffect = 'copy';
56: return false;
57: }
