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

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

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

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

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



  A股

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

$("#ma").bind("dragstart", function (event) {
    const ev = event.originalEvent
    // 存儲(chǔ)拖拽元素的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ù)器簡(jiǎn)單游戲html界面 html5實(shí)現(xiàn)拖拽移動(dòng) html實(shí)現(xiàn)彈框界面元素拖拽

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/54312.html

相關(guān)文章

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

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

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

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

趙春朋 2019-08-01 15:00 評(píng)論0 收藏0
html&&css

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

gggggggbong 2019-08-29 16:16 評(píng)論0 收藏0
html&&css

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

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

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

yy13818512006 2021-09-02 15:21 評(píng)論0 收藏0