就是一個十分簡單的小功能，將一個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方法附圖

界面效果

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

總結

以上是生活随笔為你收集整理的html拖拽显示获取坐标,html界面元素拖拽实现［超简单］的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。