| 标题 | 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开发有帮助. |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。