相關重點
DataTransfer 對象：
- 退拽對象用來傳遞的媒介，使用一般爲Event.dataTransfer。
draggable 屬性：
- 就是標籤元素要設置draggable=true，否則不會有效果，例如：
<div title="拖拽我" draggable="true">列表1</div>Event.preventDefault() 方法：
- 阻止默認的些事件方法等執行。在ondragover中一定要執行preventDefault()，否則ondrop事件不會被觸發。另外，如果是從
- 其他應用軟件或是文件中拖東西進來，尤其是圖片的時候，默認的動作是顯示這個圖片或是相關信息，並不是真的執行drop。
- 此時需要用用document的ondragover事件把它直接幹掉。Event.effectAllowed 屬性：就是拖拽的效果
| 事件 | 產生事件的元素 | 描述 |
|---|---|---|
| dragstart | 被拖放的元素 | 開始拖放操作 |
| drag | 被拖放的元素 | 拖放過程中 |
| dragenter | 拖放過程中鼠標經過的元素 | 被拖放元素開始進入本元素的範圍內 |
| dragover | 拖放過程中鼠標經過的元素 | 被拖放元素正在本元素範圍內移動 |
| dragleave | 拖放過程中鼠標經過的元素 | 被拖放元素離開本元素的範圍 |
| drop | 拖放的目標元素 | 有其他元素被拖放到本元素中 |
| dragend | 拖放的對象元素 | 這裏寫代碼片拖放操作結束 |
| 屬性 | 描述 |
|---|---|
| dropEffect | 表示拖放操作的視覺效果，允許對其進行值的設定。該效果必須在用effectAllowed屬性指定的允許的視覺效果範圍內，允許指定的值有：none、copy、link、move。 |
| effectAllowed | 用來指定當元素被拖放時所允許的視覺效果。可以指定的值有：none、copy、copyLink、copyMove、link、linkMove、all、uninitialize。 |
| files | 返回表示被拖拽文件的 FileList。 |
| types | 存入數據的MIME類型。如果任意文件被拖拽，那麼其中一個類型將會是字符串”Files”。 |
實例講解
創建一個html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{width: 400px;height: 400px;background-color: grey;}
img{width: 200px;}
</style>
<script src="js/ja.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id='box1' class="box"></div>
<img src="img/8.jpg"/>
<div class="inter"></div>
</body>
</html>
第一步的js文件
var $box,$in;
window.οnlοad=function(){
//ondragenter 事件：當拖曳元素進入目標元素的時候觸發的事件，此事件作用在目標元素上
$box = document.getElementsByClassName('box')[0];
$in =document.getElementsByClassName('inter')[0];
$box.οndragenter=function(e){
//監聽事件，返回信息
showOb(e);
}
}
function showOb(obj){
//打印事件信息
var s ='';
for(var k in obj){
s += k+':'+obj[k]+'<br/>'
}
$in.innerHTML= s;
}觀看效果
1.2.2 dragover事件，用來確定給用戶顯示怎樣的反饋信息。
如果這個事件被取消，反饋信息（通常就是光標）就會基於 dropEffect 屬性的值更新。
第二步修改代碼
var $box,$in;
window.οnlοad=function(){
//ondragenter 事件：當拖曳元素進入目標元素的時候觸發的事件，此事件作用在目標元素上
$box = document.getElementsByClassName('box')[0];
$in =document.getElementsByClassName('inter')[0];
// $box.οndragenter=function(e){
// //監聽事件，返回信息
// showOb(e);
// }
$box.ondragover = function(e){
e.preventDefault()
//阻止系統默認事件
}
$box.ondrop = function(e){
showOb(e.dataTransfer);
}
}
function showOb(obj){
//打印事件信息
var s ='';
for(var k in obj){
s += k+':'+obj[k]+'<br/>'
}
$in.innerHTML= s;
}
所求
最終額js代碼做成可以在兩個div之間拖動的效果
總代碼如下
var $box1,$in,$img1,$box2;
window.οnlοad=function(){
//ondragenter 事件：當拖曳元素進入目標元素的時候觸發的事件，此事件作用在目標元素上
$box1 = document.getElementsByClassName('box1')[0];
$box2 = document.getElementsByClassName('box2')[0];
$in =document.getElementsByClassName('inter')[0];
$img1 =document.getElementById('img1')
// $box.οndragenter=function(e){
// //監聽事件，返回信息
// showOb(e);
// }
$box1.ondragover = function(e){
e.preventDefault()
//阻止系統默認事件
}
$box2.ondragover = function(e){
e.preventDefault()
//阻止系統默認事件
}
$img1.οndragstart=function(e){
e.dataTransfer.setData('imgid','img1');
}
$box1.ondrop = function(e){
// showOb(e.dataTransfer);
e.preventDefault();
//創建節點
var img = document.getElementById(e.dataTransfer.getData('imgid'))
// $box1.appendChild(img)
//上面是在一個區域拖動，爲了實現多個區域拖動我們進行如下修改
e.target.appendChild(img)
}
$box2.ondrop = function(e){
e.preventDefault();
//創建節點
var img = document.getElementById(e.dataTransfer.getData('imgid'))
// $box2.appendChild(img)
//上面是在一個區域拖動，爲了實現多個區域拖動我們進行如下修改
e.target.appendChild(img)
}
}
function showOb(obj){
//打印事件信息
var s ='';
for(var k in obj){
s += k+':'+obj[k]+'<br/>'
}
$in.innerHTML= s;
}