詳解javascript html5輕鬆實現拖曳功能的技巧

這篇文章主要為大家詳細介紹了javascript html5輕鬆實現拖曳功能，具有一定的參考價值，有興趣的小夥伴們可以參考一下

拖放（drag和drop）是html5標準組成，下面我們從五個方面對其進行敘述，分別是如何成為拖動物體，如何成為拖動目標，拖動物體上擁有的事件，拖曳目標上擁有的事件以及拖曳物體間如何傳遞訊息。

拖曳動物體上擁有的事件

• #dragstart（當物體剛拖曳時觸發）

• drag （在dragstart事件觸發之後就被觸發）

• #dragend （拖曳事件結束時觸發）
  

• 拖曳目標上擁有的事件
  

dragenter （拖曳元素進入放置目標時觸發）

dragover （當拖曳元素在放置目標中移動時觸發，類似於mouseover）

#drop （當拖曳元素放置在放置目標中時觸發）

如何成為拖動物體

#在html中img元素預設可以進行拖曳，其它元素需要設定draggable=true，即可對其進行拖曳。

<p draggable="true"></p>

如何成為拖曳目標

html中，元素預設不能成為放置目標，只有我們禁止了drapenter和drapover事件的預設行為時，可以稱為拖放目標。

droptarget.addEventListener('dragenter', function(event) {
  event.preventDefault();
});
droptarget.addEventListener('dragover', function(event) {
  event.preventDefault();
});

拖放物體間如何傳遞訊息

事件中具有一個dataTransfer

物件

，它擁有的兩個常用方法setData()和getData()，分別用於在存放拖曳資訊以及取得拖曳資訊。其中，setData()只能在拖曳事件剛開始時設置，即dragstart事件時設置，getData()則一般在放置獲取，即drop事件觸發時獲取。

// drapobj 拖拽元素
// droptarget 放置目标
dragobj.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('id', dragobj.id);
});
droptarget.addEventListener('drop', function(event) {
  var id = event.dataTransfer.getData('id');
  var obj = document.getElementById(id);
  event.preventDefault();
  this.appendChild(obj);
});

完整程式碼

  
  



  <p draggable="true"></p>
  

    
  
  


<script>
var droptarget = document.getElementById(&#39;droptarget&#39;);
var dragobj = document.getElementById(&#39;dragobj&#39;);

// drapobj 拖拽元素
// droptarget 放置目标
dragobj.addEventListener(&#39;dragstart&#39;, function(event) {
  event.dataTransfer.setData(&#39;id&#39;, dragobj.id);
});
droptarget.addEventListener(&amp;#39;dragenter&amp;#39;, function(event) {
  event.preventDefault();
});
droptarget.addEventListener(&amp;#39;dragover&amp;#39;, function(event) {
  event.preventDefault();
});
droptarget.addEventListener(&#39;drop&#39;, function(event) {
  var id = event.dataTransfer.getData(&#39;id&#39;);
  var obj = document.getElementById(id);
  event.preventDefault();
  this.appendChild(obj);
});
</script>

存在問題

######火狐瀏覽器###中拖曳圖片默認開啟新窗口，根據javascript高級程式設計中在drop事件中禁止預設事件，未解決問題。 ############解決方法：######將圖片作為p的背景圖片，將p作為拖曳物體，則不存在此問題。 #########最終程式碼######

  
  
  



  

  
  


<script>
var droptarget = document.getElementById(&#39;droptarget&#39;);
var dragobj = document.getElementById(&#39;dragobj&#39;);

// drapobj 拖拽元素
// droptarget 放置目标
dragobj.addEventListener(&#39;dragstart&#39;, function(event) {
  event.dataTransfer.setData(&#39;id&#39;, dragobj.id);
});
droptarget.addEventListener(&amp;#39;dragenter&amp;#39;, function(event) {
  event.preventDefault();
});
droptarget.addEventListener(&amp;#39;dragover&amp;#39;, function(event) {
  event.preventDefault();
});
droptarget.addEventListener(&#39;drop&#39;, function(event) {
  var id = event.dataTransfer.getData(&#39;id&#39;);
  var obj = document.getElementById(id);
  event.preventDefault();
  this.appendChild(obj);
});
</script>

以上是詳解javascript html5輕鬆實現拖曳功能的技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！