html界面元素拖拽實作［超簡單］

就是一個十分簡單的小功能，将一個html界面元素從一個地方拖到另一個地方（複制或移動）
           

html部分,省略部分非關鍵代碼

<!-- 被拖拽元素 ：draggable屬性，表明元素可拖拽-->
<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方法附圖

界面效果

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