2. 程式人生 > 其它 >深入理解JavaScript原生拖放

深入理解JavaScript原生拖放

阿新 • • 發佈：2022-04-09

其實就兩個動作，拖和放，所以涉及到兩個元素，一個是被拖元素，稱為拖放源，另一個是要放的目標，稱為拖放目標，稱為拖放目標。

拖放源

　　HTML5為所有HTML元素規定了一個draggable屬性，表示元素是否可以拖動

　　影象和連結的draggable屬性自動被設定成了true，而其他元素這個屬性的預設值都是false

　　[注意]必須設定draggable='true'才能生效，只設置draggable不起作用

　　預設情況下，文字只有在被選中的情況下才能拖動，而影象和連結在任何時候都可以拖動。而其他元素則無法被拖放

 

<input value="文字可拖動">
<img alt="影象可拖動" src="https://files.cnblogs.com/files/xiaohuochai/zan.gif">
<a href="#">連結可拖動</a>
<div id="test" style="height:30px;width:300px;background:pink;">元素不可拖動</div>
連結可拖動 元素不可拖動 
<div draggable="true" style="height:30px;width:100px;background:pink;"></div>

拖放事件

　　拖放源涉及到3個拖放事件。拖動拖放源時，依次觸發dragstart、drag和dragend這3個事件

dragstart

　　按下滑鼠鍵並開始移動滑鼠時，會在被拖放的元素上觸發dragstart事件。此時游標變成“不能放”符號(圓環中有一條反斜線)，表示不能把元素放到自己上面

drag

　　觸發dragstart事件後，隨即會觸發drag事件，而且在元素被拖動期間會持續觸發該事件

dragend

　　當拖動停止時(無論是把元素放到了有效的放置目標，還是放到了無效的放置目標上)，會觸發dragend事件

 

<div id="test"  draggable="true" style="height:30px;width:100px;background:pink;">0</div>    
<script>
var timer,i=0;
test.ondragstart = function(){
    this.style.backgroundColor = 'lightgreen';
}
test.ondrag = function(){
    
 
if(timer) return;
    timer = setInterval(function(){
        test.innerHTML =  i++;
    },100)
}
test.ondragend = function(){
    clearInterval(timer);
    timer = 0;
    this.style.backgroundColor = 'pink';
}
</script>

 

拖放目標

　　拖放目標是指被拖動的元素鬆開滑鼠時被放置的目標

　　拖放源被拖動到拖放目標上時，將依次觸發dragenter、dragover和dragleave或drop這四個事件

dragenter

　　只要有元素被拖動到放置目標上，觸發dragenter事件

dragover

　　被拖動的元素在放置目標的範圍內移動時，持續觸發dragover事件

dragleave

　　如果元素被拖出了放置目標，觸發dragleave事件

drop

　　如果元素被放到了放置目標中，觸發drop事件

　　[注意]firefox瀏覽器的drop事件的預設行為是開啟被放到放置目標上的URL。為了讓firefox支援正常的拖放，還要取消drop事件的預設行為

　　預設情況下，目標元素是不允許被放置的，所以不會發生drop事件。只要在dragover和dragenter事件中阻止預設行為，才能成為被允許的放置目標，才能允許發生drop事件。此時，游標變成了允許放置的符號

<div id="test"  draggable="true" style="height:30px;width:130px;background:pink;float:left;">拖放源</div>    
<div id="target" style="float:right;height: 200px;width:200px;background:lightblue;">拖放目標</div>
<script>
var timer,i=0;
var timer1,i1=0;
//相容IE8-瀏覽器
test.onmousedown = function(){
    if(this.dragDrop){
        this.dragDrop();
    }
}
test.ondragstart = function(){
    this.style.backgroundColor = 'lightgreen';
    this.innerHTML = '開始拖動';
}
test.ondrag = function(){
    if(timer) return;
    timer = setInterval(function(){
        test.innerHTML =  '元素已被拖動' + ++i + '秒';
    },1000);
}
test.ondragend = function(){
    clearInterval(timer);
    timer = 0;i =0;
    this.innerHTML = '結束拖動';
    this.style.backgroundColor = 'pink';
}
target.ondragenter = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    this.innerHTML = '有元素進入目標區域';
    this.style.background = 'red';
}
target.ondragover = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    if(timer1) return;
    timer1 = setInterval(function(){
        target.innerHTML =  '元素已進入' + (++i1) + '秒';
    },1000);
}
target.ondragleave = function(){
    clearInterval(timer1);
    timer1 = 0;i1=0;
    this.innerHTML = '元素已離開目標區域';
    this.style.backgroundColor = 'lightblue';
}
target.ondrop = function(){
    clearInterval(timer1);
    timer1 = 0;i1=0;
    this.innerHTML = '元素已落在目標區域';
    this.style.backgroundColor = 'orange';    
}
</script>

 

dataTransfer物件

　　為了在拖放操作時實現資料交換，引入了dataTransfer物件，它是事件物件的一個屬性，用於從被拖動元素向放置目標傳遞字串格式的資料

　　dataTransfer物件有兩個主要方法：getData()和setData()

　　getData()可以取得由setData()儲存的值。setData()方法的第一個引數，也是getData()方法唯一的一個引數，是一個字串，表示儲存的資料型別，取值為"text"或"URL"

　　IE只定義了"text"和"URL"兩種有效的資料型別，而HTML5則對此加以擴充套件,允許指定各種MIME型別。考慮到向後相容，HTML5也支援"text"和"URL"，但這兩種型別會被對映為"text/plain"和"text/uri-list"

　　實際上，dataTransfer物件可以為每種MIME型別都儲存一個值。換句話說，同時在這個物件中儲存一段文字和一個URL不會有任何問題

　　[注意]儲存在dataTransfer物件中的資料只能在drop事件處理程式中讀取

　　在拖動文字框中的文字時，瀏覽器會呼叫setData()方法，將拖動的文字以"text"格式儲存在dataTransfer物件中。類似地，在拖放連結或影象時，會呼叫setData()方法並儲存URL。然後，在這些元素被拖放到放置目標時，就可以通過getData()讀到這些資料

<div>請將從這行文字中挑選一些移動到拖放目標中</div>    
<div id="target" style="margin-top:20px;height: 100px;width:200px;background:lightblue;">拖放目標</div>
<div id="result"></div>
<script>
target.ondragenter = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    this.innerHTML = '有元素進入目標區域';
    this.style.background = 'red';
}
target.ondragover = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
}
target.ondragleave = function(e){
    e = e || event;    
    this.innerHTML = '元素已離開目標區域';
    this.style.backgroundColor = 'lightblue';
}
target.ondrop = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    result.innerHTML = '落入目標區域的文字為:' + e.dataTransfer.getData('text');
    this.innerHTML = '元素已落在目標區域';
    this.style.backgroundColor = 'orange';    
}
</script>

 

　　當然，也可以在dragstart事件處理程式中呼叫setData()，手動儲存自己要傳輸的資料，以便將來使用 data-value=設定值

<div id="test" draggable="true" data-value="這是一個祕密" style="height:30px;width:100px;background:pink;">拖動源</div>    
<div id="target" style="margin-top:20px;height: 100px;width:200px;background:lightblue;">拖放目標</div>
<div id="result"></div>
<script>
 //相容IE8-瀏覽器
test.onmousedown = function(){
    if(this.dragDrop){
        this.dragDrop();
    }
}
test.ondragstart = function(e){
    e = e || event;
    e.dataTransfer.setData('text',test.getAttribute('data-value'));
}
target.ondragenter = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    this.innerHTML = '有元素進入目標區域';
    this.style.background = 'red';
}
target.ondragover = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
}
target.ondragleave = function(e){
    e = e || event;    
    this.innerHTML = '元素已離開目標區域';
    this.style.backgroundColor = 'lightblue';
}
target.ondrop = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    result.innerHTML = '落入目標區域的文字為:' + e.dataTransfer.getData('text');
    this.innerHTML = '元素已落在目標區域';
    this.style.backgroundColor = 'orange';    
}
</script>

 

 

 

改變游標

　　利用dataTransfer物件，不僅可以傳輸資料，還能通過它來確定被拖動的元素以及作為放罝目標的元素能夠接收什麼操作。為此，需要訪問dataTransfer物件的兩個屬性：dropEffect和effectAllowed

　　實際上，這兩個屬性並沒有什麼用，只是拖動源在拖動目標上移動時，改變不同的游標而已(但是，有一種情況除外)

dropEffect

　　dropEffect屬性可以知道被拖動的元素能夠執行哪種放置行為。這個屬性有下列4個可能的值

　　"none":不能把拖動的元素放在這裡。這是除文字框之外所有元素的預設值(此時，將無法觸發drop事件)

　　"move":應該把拖動的元素移動到放置目標

　　"copy":應該把拖動的元素複製到放置目標

　　"link":表示放置目標會開啟拖動的元素（但拖動的元素必須是一個連結，有URL)

　　在把元素拖動到放置目標上時，以上每一個值都會導致游標顯示為不同的符號

　　[注意]必須在ondragover事件處理程式中針對放置目標來設定dropEffect屬性

effectAllowed

　　dropEffect屬性只有搭配effectAllowed屬性才有用。effectAllowed屬性表示允許拖動元素的哪種dropEffect

　　effectAllowed屬性可能的值如下

　　"uninitialized":沒有給被拖動的元素設定任何放置行為

　　"none":被拖動的元素不能有任何行為

　　"copy":只允許值為"copy"的dropEffect

　　"link"只允許值為"link"的dropEffect

　　"move":只允許值為"move"的dropEffect

　　"copyLink":允許值為"copy"和"link"的dropEffect

　　"copyMove":允許值為"copy"和"move"的dropEffect

　　"linkMove":允許值為"link"和"move"的dropEffect

　　"all":允許任意dropEffect

　　[注意]必須在ondragstart事件處理程式中設定effectAllowed屬性

 

<div id="test" draggable="true"  style="height:30px;width:100px;background:pink;display:inline-block;">拖放源</div>
<br>
<div id="target1" style="margin-top:20px;height: 100px;width:150px;background:lightblue;display:inline-block;">(none)拖放目標</div>
<div id="target2" style="margin-top:20px;height: 100px;width:150px;background:lightblue;display:inline-block;">(move)拖放目標</div>
<div id="target3" style="margin-top:20px;height: 100px;width:150px;background:lightblue;display:inline-block;">(copy)拖放目標</div>
<div id="target4" style="margin-top:20px;height: 100px;width:150px;background:lightblue;display:inline-block;">(link)拖放目標</div>
<div id="result"></div>
<script>
//相容IE8-瀏覽器
test.onmousedown =function(){
    if(this.dragDrop){
        this.dragDrop();
    }
}
test.ondragstart = function(e){
    e = e || event;
    //相容firefox瀏覽器
    e.dataTransfer.setData('text','');
      e.dataTransfer.effectAllowed = 'all';
}
target1.ondragenter = target2.ondragenter =target3.ondragenter =target4.ondragenter =function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }this.style.background = 'red';
}
target1.ondragover = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    e.dataTransfer.dropEffect = 'none';
}
target2.ondragover = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    e.dataTransfer.dropEffect = 'move';
}
target3.ondragover = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    e.dataTransfer.dropEffect = 'copy';
}
target4.ondragover = function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    e.dataTransfer.dropEffect = 'link';
}
target1.ondragleave = target2.ondragleave =target3.ondragleave =target4.ondragleave =function(e){
    e = e || event;    this.style.backgroundColor = 'lightblue';
}
target1.ondrop = target2.ondrop =target3.ondrop =target4.ondrop =function(e){
    e = e || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    this.style.backgroundColor = 'orange';    
}
</script>

 

 

相關推薦

深入理解JavaScript原生拖放

其實就兩個動作，拖和放，所以涉及到兩個元素，一個是被拖元素，稱為拖放源，另一個是要放的目標，稱為拖放目標，稱為拖放目標。

深入理解JavaScript的執行機制（同步和非同步）

同步的任務沒有優先順序之分，非同步執行有優先順序，先執行微任務（microtask佇列），再執行巨集任務（macrotask佇列），同級別按順序執行

深入理解JavaScript中的淺拷貝和深拷貝

淺拷貝和深拷貝 一、資料型別 我們都知道JavaScript資料型別分為基本資料型別（String、Number、Boolean、Null、Undefined、Symbol，未來還會有BigInt）和引用資料型別（Object），當然Object還包括Date、function、

“+”號運算子的深入理解(javascript)

這個符號相信我們大家都不陌生，但是在面試中很容易遇到這個符號的各種騷操作問題，接下來我們就來深入理解分析下這個運算子是怎麼考倒我們的。

深入理解JavaScript之 new 原理及模擬實現

1.定義 new 運算子建立一個使用者定義的物件型別的例項或具有建構函式的內建物件的例項

深入理解JavaScript作用域和作用域鏈

1.什麼是作用域 作用域是在執行時程式碼中的某些特定部分中變數，函式和物件的可訪問性。換句話說，作用域決定了程式碼區塊中變數和其他資源的可見性。可能這兩句話並不好理解，我們先來看個例子：

深入理解 JavaScript 執行上下文和執行棧

前言 如果你是一名 JavaScript 開發者，或者想要成為一名 JavaScript 開發者，那麼你必須知道 JavaScript 程式內部的執行機制。執行上下文和執行棧是 JavaScript 中關鍵概念之一，是 JavaScript 難點之一。 理解執行

原生拖放詳解

技術標籤：jsjavascripthtml5 原生拖放詳解 拖放事件可拖動自定義放置目標dataTransfer物件

深入理解javascript中的this

深入理解Js中的this JavaScript作用域為靜態作用域static scope，但是在Js中的this卻是一個例外，this的指向問題就類似於動態作用域，其並不關心函式和作用域是如何宣告以及在何處宣告的，只關心它們從何處呼叫，thi

深入理解JavaScript中的語法和程式碼結構

概述 所有程式設計語言都必須遵守特定的規則才能執行。 確定程式語言的正確結構的這組規則稱為語法。 許多程式語言主要由具有語法變化的類似概念組成。

閉包原來並沒有那麼難！一文帶你深入理解JavaScript的閉包

對於那些有一點 JavaScript 使用經驗但從未真正理解閉包概念的人來說，理解閉包可以看作是某種意義上的重生，但是需要付出非常多的努力和犧牲才能理解這個概念。

深入理解JavaScript的事件執行機制

目錄前言瀏覽器非同步執行的原理瀏覽器中的事件迴圈執行棧與任務佇列巨集任務和微任務Async/await的執行順序特點示例個人分析前言

JavaScript冒泡演算法原理與實現方法深入理解

本文例項講述了JavaScript冒泡演算法。分享給大家供大家參考，具體如下： 在面試中經常會遇到面試官問到冒泡演算法。今天總結一下。

JavaScript實現拖拽和縮放效果

本文例項為大家分享了JavaScript實現拖拽和縮放效果的具體程式碼，供大家參考，具體內容如下

原生JavaScript實現拖動校驗功能

本文例項為大家分享了JavaScript實現拖動校驗的具體程式碼，供大家參考，具體內容如下

原生JS快速實現拖放

原生 JS 快速實現拖放 拖放是很常見的一種互動效果，很多時候我們都會藉助於第三方的控制元件來實現，其實用原生 js 實現起來也非常的方便。接下來我們就用原生 js 和 css 快速實現拖放效果

JavaScript物件詳解，深入理解js物件

技術標籤：javascriptjavascript 定義： 物件是JavaScript的基本資料型別。物件也是一種複合值：可以通過名字訪問這些值，我們可以將物件看做是從字串到值的對映，當然物件不僅僅是字串到值的對映，除了自有的屬

css實現快速抖動效果_原生JS快速實現拖放（drag and drop）效果

技術標籤：css實現快速抖動效果 拖放是很常見的一種互動效果，很多時候我們都會藉助於第三方的控制元件來實現，其實用原生js實現起來也非常的方便。接下來我們就用原生js和css快速實現這樣的拖放效果：

JavaScript—深入理解函式

當程式在呼叫某個函式時，做了以下的工作：準備執行環境，初始函式作用域鏈和arguments引數物件。

JavaScript中跨域問題的深入理解

前言: 學習javascript的童鞋都知道,我們在傳送網路請求,也就是我們在位址列輸入一個網址,就會自動跳轉到當前網址,比如在瀏覽器網址輸入www.baidu.com,瀏覽器就會自動跳轉到百度的的首頁 而瀏覽器傳送網路請求需要三和