H5拖动实现代码

原理以后有空再说现在嘛先上代码。。。。

*{margin: 0;}
    html,body {
        width: 100%;
        height: 100%;
        margin: 0;
    }
    #dragBoxContainer{
        width: 150px;
        padding:10px;
        background:#C1C4E0;
    }
    .dragBox{/* 拖动框 */
        text-align: center;
        background:#FFFFFF;
        border: 1px solid #999999;
        padding: 5px;
        margin: 10px 0;
        cursor: move;
        word-break: break-word;
        position: relative;
    }
    #dragPlaceholder{/* 占位符位 */
        width: 150px;
        height: 33px;
        border:1px dotted red;
    }
    .dragHide{
        /*
        left: -9999px;
        */
        opacity: 0;
        height: 0;
        padding: 0;
        margin: 0;
    }

<input type="button" value="添加" id="add">
<p id="dragthis">拖动元素是：</p>
<p>
    <span id="dragtarget">目标元素是：</span>
    <span id="dragtarget_Height">目标中间高度：</span>
</p>
<p id="mouseHeight">鼠标高度是：</p>
<p id="Tips_placeholder">占位符位置在：</p>

<div id="dragBoxContainer"></div>

    var drag_this=null;//当前拖动的元素
    var drag_target=null;//悬停在那个元素
    var DOMnum=0;
    $("#add").click(function add(e){
        DOMnum++;
        $("#dragBoxContainer").append('<div class="dragBox" draggable="true" ondragstart="handleDrag(event)">00'+DOMnum+'</div>');
        var cols = document.querySelectorAll('.dragBox');
        [].forEach.call(cols, addDnDHandlers);
    });
    function handleDrag(e){
        e.dataTransfer.setData("Text"," ");//兼容火狐
    };
    function handleDragStart(e) {//（该方法只会触发一次）拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
        e = e || window.event;
        var target = e.target || e.srcElement;
        console.log("拖动元素瞬间触发");
        drag_this=target
        console.log(drag_this);
        $("#dragthis").html("拖动元素是："+target.innerHTML);
        //$(target).addClass("dragHide");
    };
    function handleDragEnter(e) {//当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
        e = e || window.event;
        var target = e.target || e.srcElement;
        console.log("进入目标元素");
        drag_target=target;
        //console.log(target);
        $("#dragtarget").html("目标元素是："+target.innerHTML)
        //$(target).addClass("www");
    };
    function handleDragOver(e) {//拖拽元素正在目标元素上移动的时候触发的事件，此事件作用在目标元素上
        console.log("拖拽元素正在目标元素上移动");
        if (!$(drag_this).hasClass("dragHide")) {
            $(drag_this).addClass("dragHide");
        }
        //console.log({drag_this,drag_target});
        //var this_top=$(drag_this).offset().top;
        var target_top=$(drag_target).offset().top;//目标顶部高度
        var target_height=$(drag_target).height()*.5;//目标高
        //console.log({this_top,target_top});
        //console.log(target_top);
        var mouseHeight=e.pageY;//鼠标Y坐标
        $("#mouseHeight").html("鼠标高度是："+mouseHeight)
        var judgeTop=target_top+target_height;//目标中间高度：
        console.log(target_top,target_height,judgeTop)
        $("#dragtarget_Height").html("目标中间高度："+judgeTop)

        if(mouseHeight<=judgeTop){//上
            var dragPlaceholder=$(drag_target).prev("#dragPlaceholder");   
            //console.log(dragPlaceholder)
            if (dragPlaceholder.length==0) {
                $("#dragPlaceholder").remove();
                $(drag_target).before('<div id="dragPlaceholder">我是占位符位</div>')
            }
            $("#Tips_placeholder").html("占位符位置在：上")
        }else{//下
            var dragPlaceholder=$(drag_target).next("#dragPlaceholder");   
            if (dragPlaceholder.length==0) {
                $("#dragPlaceholder").remove();
                $(drag_target).after('<div id="dragPlaceholder">我是占位符位</div>')
            }
            $("#Tips_placeholder").html("占位符位置在：下")
        }
    };
    function handleDragLeave(e) {
        e = e || window.event;
        var target = e.target || e.srcElement;
        console.log("离开目标元素");
    };
    function handleDrop(e) {
        console.log("被拖拽的元素在目标元素上同时鼠标放开触发的事件");
    };
    function handleDragEnd(e) {
        console.log("鼠标释放了");
        e = e || window.event;
        var target = e.target || e.srcElement;
        //console.log(target);

        $("#dragPlaceholder").before(drag_this).remove();
        $(drag_this).removeClass("dragHide");
    };
    function add(e) {
        console.log("点击触发");
    };
    function addDnDHandlers(elem) {
        //elem.addEventListener('drag', handleDrag, false);
        elem.addEventListener('dragstart', handleDragStart, false);
        elem.addEventListener('dragenter', handleDragEnter, false)
        elem.addEventListener('dragover', handleDragOver, false);
        elem.addEventListener('dragleave', handleDragLeave, false);
        elem.addEventListener('drop', handleDrop, false);
        elem.addEventListener('dragend', handleDragEnd, false);
        elem.addEventListener('click', add, false);
    };