js graphics operation one (compatible with pc, mobile terminal to achieve draggable attribute drag and drop effect)

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

提示： draggable Properties are often used for drag and drop operations.

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

A sample project diagram is as follows：PC 实现拖动、drop function

PC：Drag and drop elements to adddraggable属性,Then bind the event on the received element,Handle logic on drop,主要代码：

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-Fired when an element enters the destination');
    // 阻止浏览器默认行为
    e.preventDefault ? e.preventDefault() : e.returnValue = false;
}

function handle_over(e) {
    //console.log('handle_over-Fired when the element is at the destination')
    //console.log("现在的ID为："+e.target.id);
    e.preventDefault();
}

function handle_leave(e) {
    console.log('handle_leave-Fired when the element leaves the destination');
    // 阻止浏览器默认行为
    // e.preventDefault()Fired when the element is dropped at the destination
}

function handle_drop(e) {
    console.log('handle_drop-Fired when the element is dropped at the destination');
    var id = parseInt(e.currentTarget.id.replace(/[^0-9]/ig, ""));
    // console.log("拖拽的元素id== " + id);
    e.preventDefault();
}

移动端：draggable 无效,Want to achieve a similar effect,Drag out the elements to follow for custom modification,如图： 

一、Use native mobile touch events：

当按下手指时,触发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 = `<ul class="clearfix ul-borderbottom-color" slot='${svp.slot}' port='${svp.port}' type='${svp.type}' draggable='true' onmousedown='outCardListClick(this)'>
                    <li><img src='${svp.imgsrc}'></li>
                    <li id='outportText${svp.slot}-${svp.port}'>${svp.name}</li>
                    <li><input type="tel" name="phone" class="layui-input" value='${svp.remark}' onchange='setOutputPortRemark(this, ${svp.slot}, ${svp.port})'></li>
                    <li class="tr"><button class="layui-btn layui-btn-sm" srxyuyan="SubSetting" onclick="OutputPortSet(${svp.type})" ></button></li>
                    </ul>`;
        $("#cont" + g).append(html2);

        let oDrag = document.getElementById("outportText" + svp.slot + "-" + svp.port);
        drag2(oDrag);//bind drag
    }
}


function drag2(oDrag) {
    let ismove;
    let d = "<div id='dragD' style='padding: 4px 10px;border:2px solid #0071ff;border-radius: 5px;position:absolute;top:0;left:0;z-index: 99999;background: #3c95d7;color:#fff;text-align: center;line-height:20px;'></div>";

    oDrag.ontouchstart = function (ev) {
        console.log("ontouchstart")
        ismove = false;
        $("input").blur();
        outCardListClick($(ev.target).parent());
        $("body").append(d);
        $("#dragD").text($(ev.target).text());
    }

    oDrag.ontouchmove = function (ev) {
        console.log("onmousemove")
        ismove = true;
        let moveX = ev.changedTouches[0].pageX ; 
        let moveY = ev.changedTouches[0].pageY ;
        let xxs = moveX -20;//Follow finger position
        let yys = moveY -10; 
        $("#dragD").css({"left": (xxs) + "px", "top" : (yys) + "px"});
        return false;
    };

    oDrag.ontouchend = function (ev) {
        console.log("!!!ontouchend ");
        if($("#dragD")) {
            $("#dragD").remove();
        }
        let element = document.elementFromPoint(ev.changedTouches[0].pageX - $(document).scrollLeft(), ev.changedTouches[0].pageY - $(document).scrollTop());
        console.log("Dropped element== " + element);
        if (element.className.indexOf('drag') > -1){
            console.log("It's the element you want to let go id=== " + element.id);
        }
    };
}

二、使用 hammer.js

The difference is in getting properties：  changedPointers     changedTouches

function inSlotPortBindPress(uid) {
    var slotPort = document.getElementById(uid);
    let d = "<div id='dragD' style='padding: 4px 10px;border:2px solid #0071ff;border-radius: 5px;position:absolute;top:0;left:0;z-index: 99999;background: #3c95d7;color:#fff;text-align: center;line-height:20px;'></div>";
    var hammer_windowsDiv = new Hammer(slotPort);
    hammer_windowsDiv.get('pan').set({ enable: true });
    hammer_windowsDiv.on("doubletap panstart panmove panend", function (ev) {
        switch (ev.type) {
            case "panstart":
                console.log("panstart")
                $("input").blur();
                $("body").append(d);
                $("#dragD").text($(ev.target).text());
            // break;
            case "panmove":
                let moveX = ev.changedPointers[0].pageX;
                let moveY = ev.changedPointers[0].pageY;
                let xxs = moveX - 20;//Follow finger position
                let yys = moveY - 10;
                $("#dragD").css({ "left": (xxs) + "px", "top": (yys) + "px" });
                break;
            case "panend":
                if ($("#dragD")) {
                    $("#dragD").remove();
                }
                let element = document.elementFromPoint(ev.changedPointers[0].pageX - $(document).scrollLeft(), ev.changedPointers[0].pageY - $(document).scrollTop());
                console.log("Dropped element== " + element);
                if (element.className.indexOf('drag') > -1) {
                    console.log("It's the element you want to let go id=== " + element.id);
                }
                break;
        }
    })
}