HTML DOM元素的Dragdrop

在前端web页面中，为了提高用户体验，通常会希望将页面中的元素设计成可dragdop的，简化用户操作。这一设计特性在缺少鼠标的触摸屏设备上，显得更为重要。

在早期的应用中，我们通常需要借助第三方的javascript库(Jquery插件等)。在HTML5已经将这一特性引入，提供原生的支持，不用再借助第三方的javascript库。现代化的程序设计中，各种前端库的引入(Jquery, nodejs, ract, angularjs)，提高了开发效率，而各自的库也有相应的插件来处理dragdrop，使得开发更为便捷。那HTML5原生的支持，到底是怎么样的？

关键就在DOM元素的 draggable 属性，如果是 draggable = “true” ，表示该元素可被拖拽。 draggable = “false” 或其它值则不可拖拽。

看一个例子：

本样例以table形式呈现，本质是div+css布局(从业务的角度，每一个是一个业务单位，而非单独的列。但只有test item列中的元素是可拖拽的)。每一行作为一个业务单元，但只有test item所在列的元素可拖拽。当其被拖拽到其它其它行的时候，以行为单位进行整体交换。

看一下行的元素布局

 <div id="div0" class="containerDiv" ondrop="drop(event)" data-dropable="true" ondragover="dragOver(event)" data-dropEl='drag0' >
                     <span class="headerCellStyle"> 1</span>
                      <span id="drag0" ondragstart="drag(event)" data-dragable="true" data-dropElHost='div0' data-sequence='1361' data-key='1361' data-orginalSequence='1361'>
                         <span style="width:4.3vw;" class="bodyCellStyle" >100</span>
                         <span  style="width:8.9vw;" class="bodyCellStyle" >Rake</span>
                         <span id="testitem0" style="vertical-align:middle; display:inline-block;width:21vw;overflow:hidden;white-space:nowrap" class=" dropElCSS" onmouseover="OnMouseEnterEvent(event)" onmouseout="OnMouseLeaveEvent(event)">Max_Load_Clamp </span>
                         <span style="display:inline-block; width:8.9vw;border-left:0.1vw solid #aaaaaa;border-right:0px;padding:0.2vw 0.2vw;white-space:nowrap"  >2016-09-25 11:07:39</span>
                     </span>
                 </div>

可拖拽DOM元素 id="testitem0" 需要特别注意，以testitem作为前缀，在拖拽判断的时候会使用到：

 if(targetContainer.id.indexOf("testitem")>=0) {
                 targetContainer = ev.target.parentNode || ev.target.parentElement;
                 targetContainer = targetContainer.parentNode || targetContainer.parentElement;
             }

因为span的限制，drapdrop的属性会冒泡到第一个block元素上，影响到parent容器DIV，形成拖拽错乱：drag的元素被pending到drop的容器中，本应该是需要交换的两个元素被合并到一个DIV容器中。通过设定鼠标进入离开事件onmouseover="OnMouseEnterEvent(event)" onmouseout="OnMouseLeaveEvent(event)" ，设定属性dragdrop为true或者false.

 function SetItemDragable(dragable, dragEl){
             var gloableStatus = true;
             if(dragEl)
                 dragEl.setAttribute("draggable", gloableStatus&&dragable);
         }

         function OnMouseEnterEvent(ev){
             var elID = ev.target.id;
             var parentEl = ev.target.parentNode || ev.target.parentElement;
             if(parentEl) SetItemDragable(true, parentEl);
         }

         function OnMouseLeaveEvent(ev){
             var elID = ev.target.id;
             var parentEl = ev.target.parentNode || ev.target.parentElement;
             if(parentEl) SetItemDragable(false, parentEl);
         }

MouseEvent

你会注意到在dragdrop元素的parent元素上，会有 data- 开头的这种自定义属性：

data-dragable="true" data-dropElHost='div0' data-sequence='1361' data-key='1361' data-orginalSequence='1361'

这些属性是被用来存储业务数据或其它自定义用途的数据。其中，最重要的data-dropElHost指向行级元素的DOM(拖拽最终的效果中的整体元素)。 data-dragable="true" 标记该元素从业务角度是否可拖拽，有别于HTML5的自定义属性 dragdrop = "true/false" ，它们唯一的区别就是业务上和技术角度是否可拖拽。

页面上的Save按钮，点击后显示拖拽后变动的元素，将 data-key， data-sequence 中的值作为一个二元组(data-key, data-sequence)表示一个元素的最终值，以字符‘；’作为多个元素值的分隔符。

完整的javascript代码为：

 function dragOver(ev) {
             ev.preventDefault();

         }

         function drag(ev) {
             if(ev.target.getAttribute("data-dragable")!="true") return;
             ev.dataTransfer.setData("text", ev.target.id);
         }

         function drop(ev) {
             ev.preventDefault();
             var targetContainer = ev.target;

             if(targetContainer.id.indexOf("testitem")>=0) {
                 targetContainer = ev.target.parentNode || ev.target.parentElement;
                 targetContainer = targetContainer.parentNode || targetContainer.parentElement;
             }

             if(targetContainer.getAttribute("data-dropable")!="true") return;

             var data = ev.dataTransfer.getData("text");
             var dropEl = document.getElementById(data);
             targetContainer.appendChild(dropEl);

             var dropElHost = document.getElementById(dropEl.getAttribute("data-dropElHost"));
             var hostOrginalEl = document.getElementById(targetContainer.getAttribute("data-dropEl"));
             targetContainer.removeChild(hostOrginalEl);
             dropElHost.appendChild(hostOrginalEl);

             //swap host id of each element
             hostOrginalEl.setAttribute("data-dropElHost", dropEl.getAttribute("data-dropElHost"));
             dropEl.setAttribute("data-dropElHost", targetContainer.id);

             //swap drop element id of its container div
             targetContainer.setAttribute("data-dropEl", data);
             dropElHost.setAttribute("data-dropEl", hostOrginalEl.id);

             //swap sequence of drop element
             var hostOrginalElSequence = hostOrginalEl.getAttribute("data-sequence");
             hostOrginalEl.setAttribute("data-sequence", dropEl.getAttribute("data-sequence"));
             dropEl.setAttribute("data-sequence", hostOrginalElSequence);

             SetSaveBtnStatus(true);

         }

         function ShowSequence() {
             var idPrefix = "drag";
             var result = "";

             var data="";
             var dragElementLength = 504; //there're not so many elements now.
             for (var i = 0; i < dragElementLength; i++) {
                 var id = idPrefix + i;
                 var el = document.getElementById(id);
                 if(el==null) continue;
                 var currentSequence = el.getAttribute("data-sequence");
                 var orginalSequence = el.getAttribute("data-orginalSequence"); 

                 if(currentSequence == orginalSequence) continue;

                 data += "("+el.getAttribute("data-key") +"," +currentSequence+")";
             }

             if(data.length==0){
                 MessageBox("ERROR: There's no item for order change!");
                 return;
             }

             document.getElementById("resultInput").value = escape( data); 

             //document.getElementById("form1").submit();
             document.getElementById("resultDiv").innerHTML = "The updated items are(data-key, data-sequence):" + data;
         }

         function SetSaveBtnStatus(activity){
             document.getElementById("saveBtn").disabled = !activity;
         }

         function SetItemDragable(dragable, dragEl){
             var gloableStatus = true;
             if(dragEl)
                 dragEl.setAttribute("draggable", gloableStatus&&dragable);
         }

         function OnMouseEnterEvent(ev){
             var elID = ev.target.id;
             var parentEl = ev.target.parentNode || ev.target.parentElement;
             if(parentEl) SetItemDragable(true, parentEl);
         }

         function OnMouseLeaveEvent(ev){
             var elID = ev.target.id;
             var parentEl = ev.target.parentNode || ev.target.parentElement;
             if(parentEl) SetItemDragable(false, parentEl);
         }

JavaScript

样式表为：

 .containerDiv {min-width:350px;width:auto;border:0.1vw solid #aaaaaa;float:none;border-top:0px;}
 .dateTip{font-style:italic;}
 .userManual{min-width:350px;width:auto;/*border:0.1vw solid #aaaaaa;*/}
 .headerCellStyle{font-weight:bold;width:3vw;display:inline-block;margin-left:0.4vw;padding:0.2vw 0px;border-right:0.1vw solid #aaaaaa;white-space:nowrap;}
 .bodyCellStyle{display:inline-block;margin-left:0.4vw;padding:0.2vw 0px;border-right:0.1vw solid #aaaaaa;white-space:nowrap;}
    .dropElCSS { width:90%; cursor: pointer;border-radius: 1vw;background-color:white; box-shadow: 0.1vw 0.3vw 0.3px #888888;border:0px dashed black ; }

CSS

附上完整的DEMO