html界面元素拖拽實現(xiàn)［超簡單］

alin 發(fā)布于2019-08-02 15:54 / 2268人閱讀

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

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

html部分,省略部分非關(guān)鍵代碼



  A股

拖拽js部分, 即監(jiān)聽部分

$("#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")
    // 根據(jù)id獲取該元素或clone該元素
    const node = $("#${id}").clone(true)  // clone方法相關(guān)參數(shù)參見附圖
    // const node = document.getElementById(id).cloneNode(true)
    // node.id = ...
    node.attr("id", "newid")
    ev.target.appendChild(node)
    .....
  })

clone方法附圖

界面效果

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

GPU云服務(wù)器云服務(wù)器簡單游戲html界面 html5實現(xiàn)拖拽移動 html實現(xiàn)彈框界面元素拖拽

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/54312.html

相關(guān)文章

task0002（四）- 練習(xí)：數(shù)據(jù)處理、輪播及交互

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

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

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

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

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

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

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

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

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

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