html 拖拽 界面,HTML+CSS入门 html界面元素如何实现拖拽

就是一个十分简单的小功能，将一个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方法附图

界面效果

本文由职坐标整理发布，更多相关内容，请关注职坐标WEB前端HTML/CSS频道！