HTML5 - Drag和Drop

HTML5拖放 - 通过简单简单的步骤学习HTML 5，其中包括2D画布，音频，视频，新语义元素，地理定位，持久本地存储，Web存储，Web SQL，Forms 2.0，微数据和拖放，IndexedDB， Web消息传递，CORS，Web RTC，画布绘制矩形，Web存储，服务器发送事件，Web画布，Web工作者，幻灯片。

拖放(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对象

事件侦听器方法所有拖放事件都接受事件对象，该对象具有名为 dataTransfer 的只读属性.

event.dataTransfer 返回与事件关联的 DataTransfer 对象，如下所示 :

function EnterHandler(event) {   DataTransfer dt = event.dataTransfer;   .............}

DataTransfer对象保存有关拖放操作的数据。可以根据与DataTransfer对象关联的各种属性来检索和设置此数据，如下所述

Sr.No.	DataTransfer属性及其描述
1	dataTransfer.dropEffect [= value] 返回当前所选的操作类型. 可以设置此属性，以更改所选操作. 可能值为none，copy，link和move.
2	dataTransfer.effectAllowed [= value] 返回允许的操作类型. 可以设置此属性，以更改允许的操作. 可能的值为 none，copy，copyLink，copyMove，link，linkMove ，move，all 和uninitialized.
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) 将给定元素添加到用于呈现拖动反馈的元素列表中.

拖放过程

以下是执行拖放操作的步骤 :

步骤1 - 使对象可拖动

以下是要采取的步骤去;

如果要拖动元素，则需要设置该元素的 draggable 属性为 true .
为 dragstart
事件监听器 dragstart 将设置允许的效果(复制，移动，链接) ，或某种组合).

以下是使对象可拖动的示例

                                 #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; }                                    function dragStart(ev) {            ev.dataTransfer.effectAllowed = 'move';            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));            ev.dataTransfer.setDragImage(ev.target,0,0);                        return true;         }                                       Drag and drop HTML5 demo
         Try to drag the purple box around.
                              Drag Me

Dustbin

步骤2-Dropping对象

要接受放置，放置目标必须侦听至少三个事件。

Dragenter事件，用于确定放置目标是否要接受放置。如果要接受下降，则必须取消此事件。
拖动事件，用于确定要向用户显示哪些反馈。如果事件被取消，则基于dropEffect属性的值来更新反馈（通常是光标）。
最后是放置事件，它允许执行实际的放置。

以下是将对象放入另一个对象的示例

                  #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; }                     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;         }                           Drag and drop HTML5 demo
         Try to move the purple box into the pink box.
                     Drag Me
                  Dustbin