html5拖动元素会触发哪些事件

拖拽发生过程

被拖拽元素

dragstart按下鼠标键并开始移动鼠标时

drag在dragstart事件之后，在元素被拖动期间会持续触发该事件

dragend当拖动停止时，会触发dragend事件

放置目标元素

dragenter有元素被拖动到放置目标上

dragover紧随dragenter发生，在被拖动的元素

还在放置目标范围内移动时，会持续触发该事件

dragleave在元素被拖出放置目标时触发

drop元素被放到了放置目标中触发

注释：拖拽发生过程：dragstart->drag->dragenter->dragover->dragleave/drop->dragend

html5 拖动效果在手机上实现方法是调用drag和drop一系列函数实现的。

注意：拖拽源在拖拽 *** 作结束将得到dragend事件对象，不管 *** 作成功与否。

举例：

定义可拖放内容

<div id="columns">

 <div class="column" draggable="true"><header>A</header></div>

 <div class="column" draggable="true"><header>B</header></div>

 <div class="column" draggable="true"><header>C</header></div>

</div>

2、监听拖动事件

可附加大量不同事件以监听整个拖放过程：

dragstart

drag

dragenter

dragleave

dragover

drop

dragend

a.这里是开始拖拽

function handleDragStart(e) {

 this.style.opacity = '0.4' // this / e.target is the source node.

}

var cols = document.querySelectorAll('#columns .column')

[].forEach.call(cols, function(col) {

 col.addEventListener('dragstart', handleDragStart, false)

})

b.dragenter、dragover 和 dragleave 事件处理程序可用于在拖动过程中提供额外的可视化提示。例如，在拖动期间将鼠标悬停在某一列上方时，其边框可能会变成虚线。这样，用户就能知道这些列也是放置的目标区域。

本文实例分享了html5 canvas可拖动省份的中国地图实现方法，供大家参考，具体内容如下

鼠标移动事件：根据点击的省份名，获得数据，并实时重绘移动层的省份

$('#eventCanvas').mousemove(function(ev){ 

 var mouseX, mouseY 

 if(ev.layerX || ev.layerX==0){ 

  mouseX = ev.layerX 

  mouseY = ev.layerY 

 }else if(ev.offsetX || ev.offsetX==0){ 

  mouseX = ev.offsetX 

  mouseY = ev.offsetY 

 } 

 if(draging){ 

  if(opts.dragAll){ <span style="font-family: Arial, Helvetica, sans-serif">//拖动整个地图，存在问题，地图画的太慢</span> 

   mapContext.clearRect(0, 0, 1100, 630) 

   for(var i = 0i < allZoneData.lengthi++){ 

    for(var j = 0j < allData[allZoneData[i].name].lengthj++){ //allData是第一次读取数据时放到内存里的变量，它包含了所有数据 

     pubFuns.drawMap(mapContext,allData[allZoneData[i].name][j],mouseX - tempX, mouseY - tempY) 

    } 

   } 

   }else{ 

    moveMapContext.clearRect(0, 0, 1100, 630) 

    pubFuns.drawMoveLayerLine(mouseX - tempX, mouseY - tempY) 

   }  

  } 

})

鼠标抬起事件：设置dragging为false，clear移动层。

$('#eventCanvas').mouseup(function(e){ 

 if(opts.dragAll){  

 }else{ 

  moveMapContext.clearRect(0, 0, 1100, 630) 

 } 

 draging = false 

})

小结：功能、原理都很简单，但能熟悉canvas的一些属性和方法。canvas层是可以重叠到一起的，这样就可以在不同的层画不同的内容，方便维护和管理。

以上就是本文的全部内容，希望对大家的学习有所帮助。

---