How to implement react drag-and-drop sorting components using H5 (code attached)

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

Drag-and-drop sequencing components GitHub address: Https://github.com/VicEcho/VD

Because the React.js technology stack is used, the encapsulation takes precedence over inputs and outputs. Renders pages based on data driven and controls the order in which elements are dragged.

Because I do not consider the compatibility of IE8 and other older browsers, drag-and-drop effect using HTML5 drag and drop (Drag and drop). Of course, if compatibility is required, related events that use mouse clicks are simple.

The effect of the implementation is as follows:

The first step is to understand the relevant properties of the H5 drag and drop, the MDN has a detailed description, linked to https://developer.mozilla.org ...
One thing to note is that React.js will add "on" to all attribute event names, followed by camel-style notation. For example, the native click event should use the OnClick event in React.js.

The drag-and-drop properties that my component uses are as follows:

1. Draggable when set to True, the current control can be dragged and dragged

2. Ondragstart The event that is triggered when the control starts being dragged, it provides a datatransfer.setdata () method that stores the necessary data in the object for easy invocation in other methods

3. OnDragOver Specifies the method by which the current control can receive a dragged component, typically preventing bubbling in this method

4. OnDragEnter triggers when the mouse enters another acceptable area after dragging, enabling the move-in effect to be achieved

5. OnDragLeave A to B, when it leaves B, it can be used to listen for the time to remove the effect.

6. OnDrop when the control is "released" to a valid release target, I process the data in this method and call the OnChange method through it, exposing the value values to the parent component

Where Draggable,ondragstart is a property that needs to be set by the "drag" side, Ondragover,ondragenter,ondragleave and OnDrop are the properties that are required to be set by the "drag-in" side. But for my drag-and-drop ordering component, each element is dragged and dragged into the

In the second step, since "she" is a react.js component, it is customary to simply set the input attribute as value, while exposing the onchange event to monitor the change of value and expose it to the parent component, while Exposing an attribute SortKey tells the component which key to use as the sort field.
Since it involves sorting, and allows you to specify the internal subcomponents of each element of the component, I define the input data format as an array object, where content can be reactnode:

Value: [                {                    content: ' P1 ',                    code: ', '                    sort:0 ',                },                {                    content: ' P2 ',                    code: '                    Sort:1                },                {                    content: ' P3 ',                    code: '                    sort:2} ',                {                    content: ' P5 ',                    Code: '                    sort:5                },                {                    content: ' P4 ',                    Code: ' ",                    sort:4                }]

Depending on the value I go to generate a sortable component for each node, the key code is as follows:

    Create a drag component Createdragglecomponent (data, SortKey, style, uId) {return Data.sort (This.compare (SortKey)). Map ((i TEM) = {return (<p classname={styles.content} key                    ={item.code} draggable={true} ondragenter={this.dragenter.bind (This)} Ondragleave={this.dragleave.bind (This)} ondragstart={this.domdrugstart.bind (this, Item[sortkey], I                    Tem.code, UID, item)} ondrop={this.drop.bind (this, Item[sortkey], data, SortKey, UID)}         Ondragover={this.allowdrop.bind (This)} style={{... style}}>{item.content}</p>)        })} render () {const {value, SortKey, style} = This.props;                    Return (<Row> <p style={{display: ' Flex ', flexdirection: ' Row '}}> {this.createdragglecomponent (value, SortKey, Style)}                </p> </Row>)} 

The

Property methods are implemented specifically:

    Drag event Domdrugstart (sort, code, EE) {ee.dataTransfer.setData ("code", code);    Ee.dataTransfer.setData ("Sort", sort);        }//Drag mouse to enter another acceptable area DragEnter (ee) {ee.target.style.border = ' 2px dashed #008dff ';    Ee.target.style.boxShadow = ' 0 0 8px Rgba (30, 144, 255, 0.8) ';        }//A drag to B, leaving B when the trigger DragLeave (ee) {ee.target.style.border = ' 1px solid grey ';    Ee.target.style.boxShadow = ";                }//Object sort compare (key) {return (obj1, obj2) = {if (Obj1[key] < Obj2[key]) {            return-1;            } else if (Obj1[key] > Obj2[key]) {return 1; } return 0}}//When an element or selected text is dragged and released to a valid release target location, drop (dropedsort, data, SortKey, ee) {E        E.preventdefault ();        Const CODE = ee.dataTransfer.getData ("code");        Const SORT = ee.dataTransfer.getData ("sort"); if (sort < Dropedsort) {Data.map (item =) {if (Item.code = = = code) {Item[sortkey] = Dropedsort;                } else if (Item[sortkey] > sort && Item[sortkey] < Dropedsort + 1) {item[sortkey]--;            } return item;        }); } else {Data.map (item = = (Item.code = = = code) {Item[sortkey] = drop                Edsort;                } else if (Item[sortkey] > dropedSort-1 && item[sortkey] < sort) {item[sortkey]++;            } return item;        });    } this.props.onChange (data)} allowDrop (ee) {ee.preventdefault (); }

The point of attention is actually only one, I control the order of time, and did not use. Target.before (document.getElementById ({ID})) to actually manipulate the node, but at each trigger ondrop time, processing the data sort, And through the onchange event exposed to the parent component, the data output, by changing the value of the virtual DOM trigger to render, to control the order.

According to the company's requirements, on this basis, I also realized the function of drag-and-drop replication.