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

時間 2019-11-24

標籤 html5 html 拖放代碼實現兩個 div 內容互換欄目 HTML5 简体版

原文原文鏈接

本文首發於個人我的博客:cherryblog.site/ ，歡迎你們前去參觀
本文項目地址，sortable插件地址：github.com/sunshine940…
demo地址：github.com/sunshine940…javascript

在寫咱們後臺的管理程序中須要有一個拖放的功能，而後咱們有一個這樣的功能，實現11個固定且大小不一的div互換，效果以下
css

做爲一個小菜鳥，聽到這樣的消息我是蒙逼的= =，在網上找到一個插件，功能挺強大的
html

插件地址：github.com/sunshine940…java

可是這個插件只能拖動和放置，不能交換，也就是隻能將div插入在其餘div前面，其他的向後推移，而且不能作到交換div中的內容，而div容器不變的條件，而後我就和其餘同事商量了一下交換兩個div中的數據要怎麼處理，而後同事說這個就比較麻煩了= =。須要寫死div，而後先記錄鼠標拖動前的div中的內容，而後判斷鼠標放下的位置，在哪個div的範圍內，再交換兩個的數據= =，真正作起來還不知道有什麼坑。聽着都怕，因而就暫且擱置了這個功能，直到有一天非作不可了，我百度了一下「怎麼交換兩個div」，而後找到了一個demo，天啦嚕~整個實現過程所有代碼50行不到，js代碼以後十幾行，整個過程不到半個小時就解決了，★,°:.☆(￣▽￣)/$:.°★。撒花！效果以下：
git

demo地址：github.com/sunshine940…
查看代碼，發現思路以下:github

ondragstart（用戶開始拖動元素時觸發）的時候使用該對象的dataTransfer.setData方法，而且用中間量記錄點擊的div
ondragover (當某被拖動的對象在另外一對象容器範圍內拖動時觸發此事件),拖動div的時候阻止拖動的默認事件（drop 事件的默認行爲是以連接形式打開）
ondrop (在一個拖動過程當中，釋放鼠標鍵時觸發此事件)時候交換兩個div的html
百度了一下發現這是html的新特性drag，研究了一下有以下特色

拖放

本例的代碼以下bash

<!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 中，拖放是標準的一部分，任何元素都可以拖放。dom

設置元素爲可拖放

首先，爲了使元素可拖動，把 draggable 屬性設置爲 true ：
<div draggable="true"></div>函數

設置ondragstart 和並保存數據

ondragstart 屬性調用了一個函數，drag(event,this)，它規定了被拖動的數據。dataTransfer.setData() 方法設置被拖數據的數據類型和值,在這個例子中，數據類型是 "text/html"，值是可拖動元素的innerHTMLui

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");
    }
}複製代碼