HTML5 Drag and Drop sorting

Recently we met the needs of drag sorted in the project, so we learned a bit of new properties H5, write blog post record it.

draggable attribute is to specify the current element can be dragged attributes; we need to set this property to drag elements

<div id="columns">
  <div class="column" draggable="true"><header>A</header></div>
  <div class="column" draggable="true"><header>B</header></div>
  <div class="column" draggable="true"><header>C</header></div>
</div>

<style>
/* Prevent the text contents of draggable elements from being selectable. */
[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}
.column {
  height: 150px;
  width: 150px;
  float: left;
  border: 2px solid #666666;
  background-color: #ccc;
  margin-right: 5px;
  -webkit-border-radius: 10px;
  -ms-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 3px #000;
  -ms-box-shadow: inset 0 0 3px #000;
  box-shadow: inset 0 0 3px #000;
  text-align: center;
  cursor: move;
}
.column header {
  color: #fff;
  text-shadow: #000 0 1px;
  box-shadow: 5px;
  padding: 5px;
  background: -moz-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
  background: -webkit-gradient(linear, left top, right top,
                               color-stop(0, rgb(0,0,0)),
                               color-stop(0.50, rgb(79,79,79)),
                               color-stop(1, rgb(21,21,21)));
  background: -webkit-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
  background: -ms-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
  border-bottom: 1px solid #ddd;
  -webkit-border-top-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -ms-border-radius-topleft: 10px;
  border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -ms-border-top-right-radius: 10px;
  -moz-border-radius-topright: 10px;
  border-top-right-radius: 10px;
}

.ghost{
　　optcity:0.6;
}

</style>

Listen for drag events

• dragstart   //当用户开始拖动一个元素或者一个选择文本的时候 dragstart 事件就会触发。
• drag　　    //当元素或者选择的文本被拖动时触发 drag 事件 (每几百毫秒)
• dragenter   //当拖动的元素或被选择的文本进入有效的放置目标时， dragenter 事件被触发。
• dragleave   //当一个被拖动的元素或者被选择的文本离开一个有效的拖放目标时，将会触发dragleave 事件
• dragover    //当元素或者选择的文本被拖拽到一个有效的放置目标上时，触发 dragover 事件(每几百毫秒触发一次)。
• drop       //当一个元素或是选中的文字被拖拽释放到一个有效的释放目标位置时，drop 事件被抛出。
• dragend    //拖放事件在拖放操作结束时触发(通过释放鼠标按钮或单击escape键)

We need the following concepts: source element (the drag originates), the data payload (we were trying to drag and drop) and the target (the area to catch the drop). Source element can be pictures, lists, links, file objects, HTML content. The goal is trying to place the receiving area of ​​the user placing data (or the placement area group). Please note that not all elements can be used as a target (such as images).

dataTransfer

dataTransfer for controlling data exchange and drag type drag of the element, mainly the following properties:

• 　　dragEffect Get / set the actual drop effect, it should always be set to  effectAllowed  one of the possible values; drag effect when the display is set according to their function 
• • Copy : Copy to new location
  • the Move : move to a new location.
  • Link : establishing a source location to the new link.
  • none : Do not place (prohibiting any operation).
• 　　effectAllowed is allowed to specify the effect of drag

• Possible values:

  • Copy : Copy to a new location.
  • the Move : move to a new location.
  • Link : establishing a source location to the new link.
  • copyLink : permission to copy or link.
  • copyMove : allowing copying or moving.
  • linkMove : allows link or move.
  • All : allows all operations.
  • none : prohibit all operations.
  • uninitialized : The default value (default value), the equivalent of all.
• 　　files contains a list of all available files on the local data transmission

method:

• clearData () to delete the data associated with a given type. Type parameter is optional. If the type is specified as empty or not, we will remove all data associated with the type. If the specified type of data is not present, or data transmission does not contain any data, this method will have no effect.

• obj.clearData(type);

• getData () to retrieve data according to the type specified, if the specified type of data that does not exist or  DataTransfer the object is no data, the method returns an empty string.

• obj.getData(type);

• setData () given to a data set type. If the data type does not exist, it is added to the end, so type in the list will be the last item in a new format. If the data type already exists, replace the existing data of the same position. That is, when replacement of the same type of data, the order of Type list does not change.

• obj.setData(type,data);

• setDragImage () to customize a desired picture when dragging. In most cases, eliminate the need for this, because the dragged node is created as the default image.

• obj.setDragImage(imgElement,offsetX,offsetY);    offsetX,offsetY为图片与鼠标的偏移量

function the sortable (rootEl, The onUpdate) {
     var dragEl;
     
    // all subclasses draggable element is set to true = draggable with 
    [] .slice.call (rootEl.children) .forEach ( function (itemEl) { 
        itemEl.draggable = to true ; 
    }); 
    
    // this function is responsible for ordering 
    function _onDragOver (EVT) { 
        evt.preventDefault (); 
        evt.dataTransfer.dropEffect = 'Move' ; 
       
        var target = evt.target;
         IF (target == target &&! == && target.nodeName dragEl 'LI' ) {
             // the Sorting
            rootEl.insertBefore (dragEl, target.nextSibling || target); 
        } 
    } 
    
    // after the end hook function sort 
    function _onDragEnd (EVT) { 
        evt.preventDefault (); 
       
        dragEl.classList.remove ( 'Ghost' ); 
        rootEl.removeEventListener ( 'dragover', _onDragOver, false ); 
        rootEl.removeEventListener ( 'dragend', _onDragEnd, false );
 
        onUpdate (dragEl); 
    } 
    
    // start sorting dragstart event listeners parent element 
    rootEl.addEventListener ( 'dragstart', function (evt ) {
         // save the current sub-element being dragged
        = evt.target dragEl; // set a mobile type 
        evt.dataTransfer.effectAllowed = 'Move' ;
         // set the data to be moved 
        evt.dataTransfer.setData ( 'the Text' , dragEl.textContent); // monitor element dragover dragend event 
        rootEl.addEventListener ( 'dragover', _onDragOver, false ); 
        rootEl.addEventListener ( 'dragend', _onDragEnd, false ); // here if you do not add the setTimeout dragged out of the elements will also be added on the class name   
        setTimeout ( function ( ) { 
            dragEl.classList.add ( 'Ghost' ); 
        }, 0 ) 
    }, to false
        
        
        
 
        );
 }
                        
 // Using                    
 sortable(document.getElementById('columns'), function (item) {
    console.log(item);
 });

 参考文章：1.Sorting with the help of HTML5 Drag'n'Drop API

                   2.Native HTML5 Drag and Drop