HTML5程序设计及实践第5章 HTML5 拖放.pptVIP

谢 谢 Thanks for listening. 第5章 HTML5拖放 目录 拖放实现方式 dataTransfer对象 拖放文件 拖放实现方式(一） 首先把draggable属性设置为 true。。 <div draggable="true" /> 然后在被拖动元素和目标元素上添加事件处理，这些事件触发的时间和作用的目标对象各不相同。 dragstart：在开始拖放动作时执行，该事件的对象是被拖动元素； drag：在拖动过程中执行，该事件的对象是被拖动元素； dragenter：当拖动界面元素进入目标元素时发生，该事件的对象是目标元素； dragover：当拖动界面元素在目标元素上移动时发生，该事件的对象是目标元素； dragleave：当拖动界面元素离开目标元素时发生，该事件的对象是目标元素； drop：将界面元素放置在目标元素时发生，该事件的对象是目标元素； dragend：完成拖放时间后反生，在drop事件之后触发，该事件的对象是被拖动元素。 拖放实现方式（二） 在页面上部署两个列表 <ul id="rolelist" ondrop="dragDrop(event)" ondragover="dragOver(event)"> <li id="role1" draggable="true" ondragstart="dragStart(event)"> 项目经理</li> … </ul> <ul id="rolebox" ondrop="dragDrop(event)" ndragover="dragOver(event)"> </ul> 拖放实现方式（三） function dragStart (event) { event.dataTransfer.setData("text/plain ", event.target.id); } function dragOver (event) { event.preventDefault(); } function dragDrop (item) { item.preventDefault(); var data = item.dataTransfer.getData("text/plain "); item.target.appendChild(document.getElementById(data)); } dataTransfer对象属性 dropEffect：设置拖放操作使用的实际行为，该属性值应该设置为effectAllowed允许的值，否则拖放操作会失败。dropeffect属性在dragenter和dragover事件中进行设置，允许设置的值有“copy”、“link”、“move” 和“none”。 copy：被拖动对象拷贝到目标元素，鼠标指针显示为 move：被动对象移动到目标元素，鼠标指针显示为 link：目标元素建立一个被拖动对象的链接，鼠标指针显示为 none：不允许放到目标位置。 function dragEnter(event) { event.dataTransfer.dropEffect = 'move'; } dataTransfer对象属性 effectAllowed：设置拖动允许发生的拖动行为，在dragstart事件中设置该属性值，该属性值可设为“none”、“copy”、“copyLink”、“copyMove”、“link”、“linkMove”、“move”、“all”和“uninitialized”。 ? copy：被拖动对象拷贝到目标元素， dropEffect应设置为“copy”； ? move: 被动对象移动到目标元素，dropEffect应设置为“move”； ? link：目标元素建立一个被拖动对象的链接，dropEffect应设置为“link”； ? copyLink：拷贝对象或建立对象链接，dropEffect应设置为“copy”或 “link”； ? copyMove：拷贝或移动对象，dropEffect应设置为“copy”或 “move”； ? linkMove：移动对象或建立对象链接，dropEffect应设置为“move”或 “link”； ? all：允许所有的拖放行为； ? none：不允许任何拖放行为； ? uninitialized：effectAllowed的默认值，执行行为等同于all。 function dragStart(event) { event.dataTransfer.effectAllowed = 'copyLink'; event.dataTransfer.setData("Text", event.target.id);