拖放(DnD)是强大的用户界面概念,可以通过鼠标点击轻松复制,重新排序和删除项目.这允许用户在元素上单击并按住鼠标按钮,将其拖动到另一个位置,然后释放鼠标按钮以将元素放在那里.
实现拖放功能使用传统的HTML4,开发人员要么必须使用复杂的JavaScript编程,要么使用其他JavaScript框架,如jQuery等.
现在,HTML 5提出了一个拖放(DnD)API,为浏览器提供原生DnD支持,使编码更容易.
HTML 5 DnD受到Chrome,Firefox 3.5和Safari 4等所有主流浏览器的支持.
在拖放操作的各个阶段中会触发多个事件.这些事件列在下面和下面;
Sr.No. | 活动&描述 |
---|---|
1 | dragstart 当用户开始拖动对象时触发. |
2 | dragenter 在拖动过程中首次将鼠标移动到目标元素上时触发.此事件的侦听器应指示是否允许在此位置放置.如果没有侦听器,或者侦听器不执行任何操作,则默认情况下不允许丢弃. |
3 | dragover 当发生拖动时,鼠标在元素上移动时会触发此事件.大多数情况下,监听器中发生的操作与dragenter事件相同. |
4 | dragleave 当鼠标在发生拖动时离开元素时会触发此事件.听众应删除用于删除反馈的任何突出显示或插入标记. |
5 | drag 每次移动鼠标时都会触发正在拖动对象. |
6 | drop 在发生丢弃的元素上触发drop事件拖动操作结束.监听器负责检索被拖动的数据并将其插入放置位置. |
7 | dragend 当用户在拖动对象时释放鼠标按钮. |
注意 去;请注意,只会触发拖动事件;在拖动操作期间不会触发鼠标事件,例如 mousemove .
事件侦听器方法所有拖放事件都接受事件对象,该对象具有名为 dataTransfer 的只读属性.
event.dataTransfer 返回与事件关联的 DataTransfer 对象,如下所示 :
function EnterHandler(event) { DataTransfer dt = event.dataTransfer; ............. }
DataTransfer对象保存有关拖放操作的数据。 可以根据与DataTransfer对象关联的各种属性来检索和设置此数据,如下所述
Sr.No. | DataTransfer属性及其描述 |
---|---|
1 | dataTransfer.dropEffect [= value]
|
2 | dataTransfer.effectAllowed [= value]
|
3 | dataTransfer.types 返回列出dragstart事件中设置的格式的DOMStringList.此外,如果正在拖动任何文件,则其中一种类型将是字符串"Files". |
4 | dataTransfer.clearData([format]) 删除指定格式的数据.如果省略参数,则删除所有数据. |
5 | dataTransfer.setData(format,data) 添加指定的数据. |
6 | data = dataTransfer.getData(format) 返回指定的数据.如果没有这样的数据,则返回空字符串. |
7 | dataTransfer.files 返回一个FileList被拖动的文件,如果有的话. |
8 | dataTransfer.setDragImage(element,x,y) 使用给定元素更新拖动反馈,替换之前指定的任何反馈. |
9 | dataTransfer.addElement(element) 将给定元素添加到用于呈现拖动反馈的元素列表中. |
以下是执行拖放操作的步骤 :
以下是要采取的步骤去;
如果要拖动元素,则需要设置该元素的 draggable 属性为 true .
为 dragstart
事件监听器 dragstart 将设置允许的效果(复制,移动,链接) ,或某种组合).
以下是使对象可拖动的示例
<!DOCTYPE HTML> <html> <head> <style type = "text/css"> #boxA, #boxB { float:left;padding:10px;margin:10px; -moz-user-select:none; } #boxA { background-color: #6633FF; width:75px; height:75px; } #boxB { background-color: #FF6699; width:150px; height:150px; } </style> <script type = "text/javascript"> function dragStart(ev) { ev.dataTransfer.effectAllowed = 'move'; ev.dataTransfer.setData("Text", ev.target.getAttribute('id')); ev.dataTransfer.setDragImage(ev.target,0,0); return true; } </script> </head> <body> <center> <h2>Drag and drop HTML5 demo</h2> <div>Try to drag the purple box around.</div> <div id = "boxA" draggable = "true" ondragstart = "return dragStart(ev)"> <p>Drag Me</p> </div> <div id = "boxB">Dustbin</div> </center> </body> </html>
要接受放置,放置目标必须侦听至少三个事件。
Dragenter事件,用于确定放置目标是否要接受放置。 如果要接受下降,则必须取消此事件。
拖动事件,用于确定要向用户显示哪些反馈。 如果事件被取消,则基于dropEffect属性的值来更新反馈(通常是光标)。
最后是放置事件,它允许执行实际的放置。
<html> <head> <style type="text/css"> #boxA, #boxB { float:left;padding:10px;margin:10px;-moz-user-select:none; } #boxA { background-color: #6633FF; width:75px; height:75px; } #boxB { background-color: #FF6699; width:150px; height:150px; } </style> <script type="text/javascript"> function dragStart(ev) { ev.dataTransfer.effectAllowed='move'; ev.dataTransfer.setData("Text", ev.target.getAttribute('id')); ev.dataTransfer.setDragImage(ev.target,0,0); return true; } function dragEnter(ev) { event.preventDefault(); return true; } function dragOver(ev) { return false; } function dragDrop(ev) { var src = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(src)); ev.stopPropagation(); return false; } </script> </head> <body> <center> <h2>Drag and drop HTML5 demo</h2> <div>Try to move the purple box into the pink box.</div> <div id="boxA" draggable="true" ondragstart="return dragStart(event)"> <p>Drag Me</p> </div> <div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">Dustbin</div> </center> </body> </html>