HTML+CSS入门 html界面元素如何实现拖拽-职坐标

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

沉沙 2018-05-29 来源：阅读 3250 评论 0

摘要：本文讲解了html界面元素拖拽实现方法，希望阅读本篇文章以后大家有所收获，学会html界面元素如何实现拖拽，帮助大家HTML+CSS入门。

就是一个十分简单的小功能，将一个html界面元素从一个地方拖到另一个地方（复制或移动）

html部分,省略部分非关键代码

<div id="ma" class="MA" draggable="true">

A股 </div>

<div id="box" class="canvas-box">

</div>

拖拽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+CSS入门 html界面元素如何实现拖拽