H5 implementing drag-and-drop sorting code

This article brings to you the content is about H5 implementation of drag-and-drop sequencing code, there is a certain reference value, the need for friends can refer to, I hope to help you.

First, the demand

Bean-fruit Recipe system, SKU list for drag-and-drop sorting,

Ii. HTML5 The knowledge point of the drag and drop API

First we need to know how the elements can be dragged and set their Draggable property, where the Dragable property of the IMG and a tag is true by default and does not need to be set manually.

The Listener events for the drag-and-drop API are as follows:

DragStart: The source object is dragged and dragged to start;

Drag: In the process of source object dragging;

Dragend: The source object is dragged and dragged to the end;

DragEnter: Enter the Process object area;

DragOver: Moving within the Process object area;

DragLeave: Leave the Process object area;

Drop: The source object is dragged and dropped to the target area.

For these events, we want to use Preventdefault () to remove its default behavior in combination with demand.

In a drag-and-drop event, DataTransfer is provided to pass data between the source object and the target object, datatransfer generally by e.datatransfer

The DataTransfer method is as follows:

SetData (format, data)

GetData (format);

ClearData ().

Third, HTML structure:

P.cp-sku-show

Span.border-grey

Span span span

Img

Four, drag and pull to realize the idea

1, the Draggable property of the Span.border-grey to be dragged is set to "true";

2. Judge the index of drag source and drop target, if the index of the target is large, drag the source to insert backwards, instead, drag the source forward;

V. Implementation code

<span class= ' Border-grey ' draggable= ' true ' id= ' "+num+" ' ondragstart= ' drag (event) ' ondragover= ' AllowDrop (event) ' ondrop= ' Drop event ' ><span> ' +result.skuid+ ' </span><span> ' +result.skuname+ ' </span> <span> "+                        " </span><i ' Cp-input-close iconfont ' onclick= ' Deletesku (this) ' >& #xe69a;</i></span>

Drag what function drag (e) {e.datatransfer.setdata (' Text ', e.target.id);             Console.log ($ ('. Border-grey ')) $ ('. Border-grey '). each ((index,element) = {if (element.id = = = E.target.id) {        Records the index of the dragged element and compares it with Targetindex to determine whether to insert forward or backward COMMON.index.originIndex = index; }})///Console.log (' Originindex ', COMMON.index.originIndex)}//where to place function AllowDrop (EV) {Ev.preventdefault ();}    Place function Drop (EV) {ev.preventdefault (); /** * Judging is not within the control range */if (ev.target.className! = "Border-grey" && ev.target.parentElement.className! = "Bo    Rder-grey "&& ev.target.parentElement.parentElement.className! =" Border-grey ") {return; var id = "";//Drop target ID//If position is Span.border-grey if (ev.target.className = = "Border-grey") {//if placement is s Pan.border-grey Element id = ev.target.id}else if (ev.target.parentElement.className = = "Border-grey") {//if placed The position is the span sub-element under Span.border-grey ID = ev.target.parentElement.id}else if (ev.target.parentElement.parentElement.className = = "Border-grey") {//IF The placement is under Span.border-grey of IMG child element id = ev.target.parentElement.parentElement.id} $ ('. Border-grey '). each ((Index            , Element) = {if (Element.id = = = id) {//The index of the placed element is recorded, compared to Targetindex to determine whether to insert forward or backward        COMMON.index.targetIndex = index;     }}) var data=ev.datatransfer.getdata ("Text"); The index of the drop target is greater than the index of the dragged element, indicating that it is inserted backwards, and vice versa if (COMMON.index.targetIndex > COMMON.index.originIndex) {$ ("#" +id). aft    ER (document.getElementById (data));    }else{$ ("#" +id). Before (document.getElementById (data)); }}