HTML DOM元素的Dragdrop

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

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

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

看一个例子：

HTML DOM元素的Dragdrop

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

看一下行的元素布局

1 <div id="div0" class="containerDiv" ondrop="drop(event)" data-dropable="true" ondragover="dragOver(event)" data-dropEl='drag0' >
2                     <span class="headerCellStyle"> 1</span>
3                      <span id="drag0" ondragstart="drag(event)" data-dragable="true" data-dropElHost='div0' data-sequence='1361' data-key='1361' data-orginalSequence='1361'>
4                         <span style="width:4.3vw;" class="bodyCellStyle" >100</span>
5                         <span  style="width:8.9vw;" class="bodyCellStyle" >Rake</span>
6                         <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>
7                         <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>
8                     </span>
9                 </div>

View Code