這篇文章主要為大家詳細介紹了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();
});登入後複製
，它擁有的兩個常用方法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);
});登入後複製
HTML5 拖拽 <p draggable="true"></p><script> var droptarget = document.getElementById('droptarget'); var dragobj = document.getElementById('dragobj'); // drapobj 拖拽元素 // droptarget 放置目标 dragobj.addEventListener('dragstart', function(event) { event.dataTransfer.setData('id', dragobj.id); }); droptarget.addEventListener(&#39;dragenter&#39;, function(event) { event.preventDefault(); }); droptarget.addEventListener(&#39;dragover&#39;, function(event) { event.preventDefault(); }); droptarget.addEventListener('drop', function(event) { var id = event.dataTransfer.getData('id'); var obj = document.getElementById(id); event.preventDefault(); this.appendChild(obj); }); </script>
存在問題
######火狐瀏覽器###中拖曳圖片默認開啟新窗口，根據javascript高級程式設計中在drop事件中禁止預設事件，未解決問題。 ############解決方法：######將圖片作為p的背景圖片，將p作為拖曳物體，則不存在此問題。 #########最終程式碼######HTML5 拖拽 <script> var droptarget = document.getElementById('droptarget'); var dragobj = document.getElementById('dragobj'); // drapobj 拖拽元素 // droptarget 放置目标 dragobj.addEventListener('dragstart', function(event) { event.dataTransfer.setData('id', dragobj.id); }); droptarget.addEventListener(&#39;dragenter&#39;, function(event) { event.preventDefault(); }); droptarget.addEventListener(&#39;dragover&#39;, function(event) { event.preventDefault(); }); droptarget.addEventListener('drop', function(event) { var id = event.dataTransfer.getData('id'); var obj = document.getElementById(id); event.preventDefault(); this.appendChild(obj); }); </script>
以上是詳解javascript html5輕鬆實現拖曳功能的技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！
