js 图形操作一（兼容pc、移动端实现 draggable属性拖放效果）

draggable 属性是 HTML5 新增的。属性规定元素是否可拖动。

提示： draggable 属性经常用于拖放操作。

语法：<element draggable="true|false|auto">

项目示例图如下：PC 实现拖动、放下功能

PC：拖拽元素加上draggable属性，然后再在接收的元素上绑定事件，在放下时处理逻辑，主要代码：


var oDrag5 = document.getElementById("dragbox" + screenid);
oDrag5.ondragenter = handle_enter;
oDrag5.ondragover = handle_over;
oDrag5.ondragleave = handle_leave;
oDrag5.ondrop = handle_drop;
 
function handle_enter(e) {
    console.log('handle_enter-当元素进入目的地时触发');
    // 阻止浏览器默认行为
    e.preventDefault ? e.preventDefault() : e.returnValue = false;
}
 
function handle_over(e) {
    //console.log('handle_over-当元素在目的地时触发')
    //console.log("现在的ID为："+e.target.id);
    e.preventDefault();
}
 
function handle_leave(e) {
    console.log('handle_leave-当元素离开目的地时触发');
    // 阻止浏览器默认行为
    // e.preventDefault()当元素在目的地放下时触发
}
 
function handle_drop(e) {
    console.log('handle_drop-当元素在目的地放下时触发');
    var id = parseInt(e.currentTarget.id.replace(/[^0-9]/ig, ""));
    // console.log("拖拽的元素id== " + id);
    e.preventDefault();
}

移动端：draggable 无效，想实现类似效果，拖出跟随的元素可自定义修改，如图：

一、使用原生移动端触屏事件：

当按下手指时，触发ontouchstart
当移动手指时，触发ontouchmove
当移走手指时，触发ontouchend


let g = 7;//伪代码示例
for (var j = 0; j < list.length; j++) {
    if (list[j].slot == g) {
        var svp = list[j];
        var html2 = `

${svp.name}

js 图形操作一（兼容pc、移动端实现 draggable属性 拖放效果）

js 图形操作一（兼容pc、移动端实现 draggable属性拖放效果）