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);
};