今天小编跟大家讲解下有关HTML5中实现拖放效果无须借助javascript ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关HTML5中实现拖放效果无须借助javascript 的相关资料，希望小伙伴们看了有所帮助。
在Web开发中 我们要实现拖放效果 需要借助Javascript。今天让我们使用Html5实现它： 先看html核心代码: 复制代码代码如下: <div> <p>把黄色小方块拖入到红色大方框中</p> </div> <div id="item"draggable="true"> </div> <div id="drop"> </div> draggable属性是html5新增加的 它有三个值true,false,auto. true是可以拖 false是不可以 auto由用户浏览器是否支持而定。更多请可以参考官方文档. 加上一点儿样式: 复制代码代码如下: <style type="text/css"> #drop { width: 300px; height: 200px; background-color: #ff0000; padding: 5px; border: 2px solid #000000; } #item { width: 100px; height: 100px; background-color: #ffff00; padding: 5px; margin: 20px; border: 1px dashed #000000; } *[draggable=true] { -moz-user-select:none; -khtml-user-drag: element; cursor: move; } *:-khtml-drag { background-color: rgba(238,238,238, 0.5); } </style> 然后我们来看javascript： 复制代码代码如下: function listenEvent(eventTarget, eventType, eventHandler) { if (eventTarget.addEventListener) { eventTarget.addEventListener(eventType, eventHandler,false); } else if (eventTarget.attachEvent) { eventType ="on"+ eventType; eventTarget.attachEvent(eventType, eventHandler); } else { eventTarget["on"+ eventType] = eventHandler; } } // cancel event function cancelEvent (event) { if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } } // cancel propagation function cancelPropagation (event) { if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } } window.onload=function() { var target = document.getElementById("drop"); listenEvent(target,"dragenter",cancelEvent); listenEvent(target,"dragover", dragOver); listenEvent(target,"drop",function (evt) { cancelPropagation(evt); evt = evt || window.event; evt.dataTransfer.dropEffect = 'copy'; var id = evt.dataTransfer.getData("Text"); target.appendChild(document.getElementById(id)); }); var item = document.getElementById("item"); item.setAttribute("draggable","true"); listenEvent(item,"dragstart", function(evt) { evt = evt || window.event; evt.dataTransfer.effectAllowed = 'copy'; evt.dataTransfer.setData("Text",item.id); }); }; function dragOver(evt) { if (evt.preventDefault) evt.preventDefault(); evt = evt || window.event; evt.dataTransfer.dropEffect = 'copy'; return false; } 由上面的代码我们看使用一组HTML5 提供的拖放Events,直接来看下面: dragstart Drag event starts. drag During the drag operation. dragenter Drag is over the target; used to determine if target will accept drop. dragover Drag is over target; used to determine feedback to user. drop Drop occurs. dragleave Drag leaves target. dragend Drag operation ends. 定义了相关的事件 来实现想要功能。上面的Js不难看懂。你可以自己试一下 目前在Opera支持最好 IE效果并不好。 希望对您Web开发有帮助.
来源：爱蒂网
