*{margin:;}

     html,body {

         width: 100%;

         height: 100%;

         margin:;

     }

     #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:;

         height:;

         padding:;

         margin:;

     }

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

     };