html5拖放--15行js程式碼實現兩個div內容互換

sunshine小小倩發表於2017-05-24

本文首發於我的個人部落格:cherryblog.site/ ,歡迎大家前去參觀
本文專案地址,sortable外掛地址:github.com/sunshine940…
demo地址:github.com/sunshine940…

在寫我們後臺的管理程式中需要有一個拖放的功能,然後我們有一個這樣的功能,實現11個固定且大小不一的div互換,效果如下

最終效果圖
最終效果圖

作為一個小菜鳥,聽到這樣的訊息我是蒙逼的= =,在網上找到一個外掛,功能挺強大的

sortable外掛
sortable外掛

sortable外掛
sortable外掛

外掛地址:github.com/sunshine940…

但是這個外掛只能拖動和放置,不能交換,也就是隻能將div插入在其他div前面,其餘的向後推移,並且不能做到交換div中的內容,而div容器不變的條件,然後我就和其他同事商量了一下交換兩個div中的資料要怎麼處理,然後同事說這個就比較麻煩了= =。需要寫死div,然後先記錄滑鼠拖動前的div中的內容,然後判斷滑鼠放下的位置,在哪一個div的範圍內,再交換兩個的資料= =,真正做起來還不知道有什麼坑。聽著都怕,於是就暫且擱置了這個功能,直到有一天非做不可了,我百度了一下“怎麼交換兩個div”,然後找到了一個demo,天啦嚕~整個實現過程全部程式碼50行不到,js程式碼之後十幾行,整個過程不到半個小時就解決了,★,°:.☆( ̄▽ ̄)/$:.°★。撒花!效果如下:

demo效果
demo效果

demo地址:github.com/sunshine940…
檢視程式碼,發現思路如下:

  1. ondragstart( 使用者開始拖動元素時觸發)的時候使用該物件的dataTransfer.setData方法,並且用中間量記錄點選的div
  2. ondragover (當某被拖動的物件在另一物件容器範圍內拖動時觸發此事件),拖動div的時候阻止拖動的預設事件(drop 事件的預設行為是以連結形式開啟)
  3. ondrop (在一個拖動過程中,釋放滑鼠鍵時觸發此事件)時候交換兩個div的html
    百度了一下發現這是html的新特性drag,研究了一下有如下特點

拖放

本例的程式碼如下

<!DOCTYPE html>
<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        #div1
        {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
        #div2
        {float:left; width:200px; height:135px; margin:10px;padding:10px;border:1px solid #aaaaaa;}

    </style>
    <script type="text/javascript">
        function allowDrop(ev)
        {
            ev.preventDefault();
        }

        var srcdiv = null;
        function drag(ev,divdom)
        {
            srcdiv=divdom;
            ev.dataTransfer.setData("text/html",divdom.innerHTML);
        }

        function drop(ev,divdom)
        {
            ev.preventDefault();
            if(srcdiv != divdom){
                srcdiv.innerHTML = divdom.innerHTML;
                divdom.innerHTML=ev.dataTransfer.getData("text/html");
            }
        }
    </script>
</head>
<body>

<div id="div1" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">
    <p>ni hao!</p>
</div>
<div id="div2" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">
    <p>Hello world!</p>
</div>

</body>
</html>複製程式碼

拖放是一種常見的特性,即抓取物件以後拖到另一個位置。
在 HTML5 中,拖放是標準的一部分,任何元素都能夠拖放。

設定元素為可拖放

首先,為了使元素可拖動,把 draggable 屬性設定為 true :
<div draggable="true"></div>

設定ondragstart 和並儲存資料

ondragstart 屬性呼叫了一個函式,drag(event,this),它規定了被拖動的資料。dataTransfer.setData() 方法設定被拖資料的資料型別和值,在這個例子中,資料型別是 "text/html",值是可拖動元素的innerHTML

function drag(ev,divdom){
   srcdiv=divdom;
   ev.dataTransfer.setData("text/html",divdom.innerHTML);
}複製程式碼

放到何處 - ondragover

ondragover 事件規定在何處放置被拖動的資料。
預設地,無法將資料/元素放置到其他元素中。如果需要設定允許放置,我們必須阻止對元素的預設處理方式。
這要通過呼叫 ondragover 事件的 event.preventDefault() 方法:
event.preventDefault()

function allowDrop(ev){
   ev.preventDefault();
}複製程式碼

進行放置 - ondrop

當放置被拖資料時,會發生 drop 事件。
在上面的例子中,ondrop 屬性呼叫了一個函式,drop(event):

 function drop(ev,divdom){
    ev.preventDefault();
    if(srcdiv != divdom){
         srcdiv.innerHTML = divdom.innerHTML;
      divdom.innerHTML=ev.dataTransfer.getData("text/html");
    }
}複製程式碼

相關文章