html界面元素拖拽實現［超簡單］

alin 發布于2019-08-02 15:54 / 2259人閱讀

摘要：就是一個十分簡單的小功能，將一個界面元素從一個地方拖到另一個地方復制或移動部分省略部分非關鍵代碼被拖拽元素屬性，表明元素可拖拽股拖拽目標區域拖拽部分即監聽部分存儲拖拽元素的注意和的寫法略有不同禁止冒泡獲取被拖拽元素的根據獲

就是一個十分簡單的小功能，將一個html界面元素從一個地方拖到另一個地方（復制或移動）

html部分,省略部分非關鍵代碼



  A股

拖拽js部分, 即監聽部分

$("#ma").bind("dragstart", function (event) {
    const ev = event.originalEvent
    // 存儲拖拽元素的id
    ev.dataTransfer.setData("targetId", ev.target.id)
  })

// 注意jquery和js的寫法略有不同
$("#box").bind("drop", function (event) {
    // 禁止冒泡
    event.stopPropagation()
    const ev = event.originalEvent
    // 獲取被拖拽元素的id
    const id = ev.dataTransfer.getData("targetId")
    // 根據id獲取該元素或clone該元素
    const node = $("#${id}").clone(true)  // clone方法相關參數參見附圖
    // const node = document.getElementById(id).cloneNode(true)
    // node.id = ...
    node.attr("id", "newid")
    ev.target.appendChild(node)
    .....
  })

clone方法附圖

界面效果

醬醬，完啦！撒花，撒花！

GPU云服務器云服務器簡單游戲html界面 html5實現拖拽移動 html實現彈框界面元素拖拽

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54312.html

task0002（四）- 練習：數據處理、輪播及交互

摘要：獲取下一個元素節點，存在的話，取消現有選中狀態，設置下一個元素節點為選擇中，調用運動框架實現動畫，添加定時器，調用該函數，實現自動播放。移出時，開啟定時器，繼續輪播。輪播間隔時間單位為毫秒，默認為，在內部，以下部分進行修改或添加。轉載自我的個人博客歡迎大家批評指正包括5部分：小練習1-處理用戶輸入小練習2-日期對象的使用小練習3：輪播圖小練習4：輸入提示框小練習...

cnTomato 2019-08-22 10:59 評論0 收藏0
task0002（四）- 練習：數據處理、輪播及交互

摘要：獲取下一個元素節點，存在的話，取消現有選中狀態，設置下一個元素節點為選擇中，調用運動框架實現動畫，添加定時器，調用該函數，實現自動播放。移出時，開啟定時器，繼續輪播。輪播間隔時間單位為毫秒，默認為，在內部，以下部分進行修改或添加。轉載自我的個人博客歡迎大家批評指正包括5部分：小練習1-處理用戶輸入小練習2-日期對象的使用小練習3：輪播圖小練習4：輸入提示框小練習...

趙春朋 2019-08-01 15:00 評論0 收藏0
html&&css

摘要：標準模式的排版和運作模式都是以該瀏覽器支持的最高標準運行。這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距?？刂票韱慰丶慕脿顟B。首先，巧妙的使用這一標記，將游覽器從所有情況中分離出來。 1.Doctype作用？標準模式與兼容模式各有什么區別聲明位于位于HTML文檔中的第一行，處于?標簽之前。告知瀏覽器的解析器,用什么文檔標準解析這個文檔。DOCTYPE不存在...

gggggggbong 2019-08-29 16:16 評論0 收藏0
html&&css

摘要：標準模式的排版和運作模式都是以該瀏覽器支持的最高標準運行。這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距。控制表單控件的禁用狀態。首先，巧妙的使用這一標記，將游覽器從所有情況中分離出來。 1.Doctype作用？標準模式與兼容模式各有什么區別聲明位于位于HTML文檔中的第一行，處于?標簽之前。告知瀏覽器的解析器,用什么文檔標準解析這個文檔。DOCTYPE不存在...

eccozhou 2019-08-02 11:08 評論0 收藏0
程序員！一款超實用的安卓實時同步投屏電腦的軟件，誰用誰知道！

QtScrcpy超贊的安卓實時投屏軟件 QtScrcpy介紹眼見為實的效果環境準備主要功能介紹手機打開USB調式模式運行精簡模式非精簡模式運行時注意這個圖無線連接步驟（保證手機和電腦在同一個局域網）： QtScrcpy介紹 QtScrcpy可以通過USB(或通過TCP/IP)連接Android設備，并進行顯示和控制。不需要root權限。單個應用程序最多支持16個安卓設備同時連接。同時支持G...

yy13818512006 2021-09-02 15:21 評論0 收藏0