拖拽操做

1、基本信息

描述：被拖拽的元素依然在原地，拖拽的至關於拖拽元素的影子

方法：

一、在標籤裏寫draggable="true"

<li draggable="true"></li>

二、被拖拽的元素

（1）拖拽前觸發

寫法：元素.ondragstart = function(){ }

描述：點擊被拖拽元素且開始拖拽的一瞬間觸發的事件

（2）拖拽結束觸發

寫法：元素.ondragend= function(){ }

描述：當拖拽後鼠標擡起的時候表示拖拽結束，觸發事件

（3）拖拽開始與結束之間連續觸發

寫法：元素.ondrag= function(){ }

描述：即時拖拽的時候停在原地不動也會一直觸發

三、目標元素

（1）拖拽到目標點的時候觸發

寫法：元素.ondragenter= function(){ }

描述：當被拖拽的元素進入目標位置的時候觸發

（2）離開目標點的時候觸發

寫法：元素.ondragleave= function(){ }

描述：當被拖拽的元素離開目標位置的時候觸發

（3）拖拽到目標點到離開之間觸發

寫法：元素.ondragover= function(){ }

描述：移動到目標點後就會一直觸發，即便停在目標點內不動，移出目標點的時候中止觸發

四、被拖拽元素在目標元素上鼠標釋放觸發

寫法：元素.ondrop= function(){ }

觸發條件：要想觸發drop事件，就必須在dragover當中阻止默認事件ev.preventDefault();