HTML5 – 拖拽元素及拖拽接口

简介

在Html5中，如果想拖拽元素，就必须为元素添加 draggable="true" .图片和超链接默认就可以拖拽

支持事件

支持事件中，分为拖拽离开的元素事件和拖拽到目标的元素事件

离开元素事件

离开元素是指一个需要拖拽的元素在拖拽前的原所在盒子元素，拖拽元素被拖拽后会产生一系列的事件。

ondrag : 应用于拖拽元素，整个拖拽过程都会持续调用

ondragstart : 应用于拖拽元素，当拖拽开始时调用

ondragleave : 应用于拖拽元素，当鼠标离开拖拽元素时调用

ondragend : 应用于拖拽元素，当拖拽结束时调用

const inp = document.querySelector('#file_input')
 inp.ondrag = function(){}
 inp.ondragstart = function(){}
 inp.ondragleave = function(){}
 inp.ondragend = function(){}

目标元素事件

目标元素是指拖拽元素最终拖拽到的元素盒子元素，拖拽元素到达目标盒子元素时会触发一系列事件。

ondragenter : 应用于目标元素，当拖拽元素进入时调用

ondragover  : 应用于目标元素，当停留在目标元素上时持续调用

ondrop : 应用于目标元素，当在目标元素上松开鼠标时调用

注意：ondrop 方法浏览器会默认阻止，也就是说，浏览器会在你拖拽放开时，按理是不允许你把元素移动到目标盒子元素的，因此如果想触发 ondrop 事件，那么就必须在 ondragover 事件中阻止浏览器的默认行为。

event.preventDefault();

在 ondrop 方法中，再使用 div.appendChild( element )  加入元素到目标盒子元素中

ondragleave : 应用于目标元素，当鼠标离开目标元素时调用

const div = document.querySelector('#div')
 div.ondragend = function(){}
 div.ondragover = function(){}
 div.ondragleave = function(){}
 div.ondrop = function(){}

通用拖拽方法

通过上面的节章中，我们可以知道，在盒子上添加事件方法，可以实现元素的拖拽，但问题就来了，如果我们把目标元素设定为某个div盒子，那如果页面上存在多个盒子和元素，他们需要互相之间可以拖拽到任一盒子，该怎么办呢？

使用 document 作为拖出和拖入的元素

document 作为一个全局的元素，只要在其下的任一元素进行了拖拽，都能触发上面的8个事件，因此我们可以通过把拖拽事件范围扩大到 document 上。

 document.ondrag = function(e){}
 document.ondragstart = function(e){}
 document.ondragleave = function(e){}
 document.ondragend = function(e){}

 document.ondragend = function(){}
 document.ondragover = function(){}
 document.ondragleave = function(){}
 document.ondrop = function(){}

问题来了，我们使用 document 作为拖拽元素，在拖拽时我们如何知道我们拖拽的是 document 其下的那一个元素呢？

当我们的拖拽元素触发后，都会传递一个事件参数 event，而这一参数是指 document 的 event 参数，我们可以通过 event.target 属性获得我们所拖拽的元素。

document.ondragstart = function(e){
   e.target // 当前的拖拽元素
   e.target.parentNode // 当前的拖拽元素的父元素
   e.target.style.opacity // 当前拖拽元素的透明度样式
   .....
}

当我们发生 ondrop 方法时，我们需要 appendChild() 方法，那我们如何知道，要把那一个元素移动到目标元素呢？

使用 dataTransfer 来实现数据的存储与获取

e.dataTransfer.setData(format, data) :

format :数据的类型：text/html  或 text/url-list

data :数据：一般来说是字符串值

使用 setData存储的数据，只能在ondrop  事件中获取，因为 e.dataTransfer.getData 获得的是元素的 id 号，而在ondrop 以外的事件方法中，获取不到 id 号

document.ondrop = function( e ){
  const id = e.dataTransfer.getData( 'text/html' )
  
  // 通过 getElementById 找到拖拖元素，e.target 是目标元素
  e.target.appentChild( document.getElementById( id ) )
}