(10) simulate HTML5 Implementation of dragdrop

Dragdrop seems simple, but it is not easy to implement. HTML5 provides events to support dragdrop. With these events, you can easily implement dragdrop. Some friends are not familiar with the dragdrop of HTML5. Here we will first introduce the standard dragdrop.

Dragdrop is not a new thing. It was available as early as ie4. But at that time it was only the exclusive skill of IE, so the standard browser does not support this event. Now HTML5 adopts the IE method, so currently the latest browsers support dragdrop.

Dragdrop is two operations: Drag (drag) drop (put down.

To implement drag, you need to know the following events:

• Dragstart-drag start event
• Drag-when dragging, this event keeps appearing
• Dragend-drag end event

 

To implement drop, you need to know the following events:

• Dragenter-drag to current zone event
• Dragover-when dragged to the current area, it appears continuously
• Dragleave-drag out event
• Drop-stop an event in the Current Zone

 

If you drag an element to another element, the event occurs in the following order:

 

Dragstart-drag (continuous)-[dragenter-dragover/drag (Alternate)-dragleave/drop-] dragend

The drag event parameter E has a member datatransfer, which indicates the data being dragged.

 

By default, IMG and a labels can be dragged. If you want to drag other nodes, you must specify draggable = "true ".

 

 

Based on the above, you may write something like this.Code:

 

 

 

 
<Div id = "ET"> drag the delegate layer </div> <Div id = "drag" draggable = "true"> dragged </div> <Div class = "ASD "id =" zone "> drag area
</Div> <SCRIPT >$ ('drag '). on ('dragstart', function (e) {console. log (E. type );}). on ('drag', function (e) {console. log (E. type );}). on ('dragend', function (e) {console. log (E. type) ;}); </SCRIPT>
 

However, this code can only be executed normally in chrome.

For IE, You need to select the word and drag it.

For Safari, add the following code:

 

<Style> [draggable = true] {-khtml-user-drag: element;} </style>
 

In addition to the following code, you must add

 

 
Function dragstart (e) {e. datatransfer. setdata ('text', this. ID); // Firefox must add this sentence}
 

Currently, different browsers have different support for dragdrop. The old browser does not support dragdrop.

 

Therefore, you must find a harmonious solution.

 

My goal is to simulate the dragdrop of the browser so that it is the same as that of the browser native.

Call a function first:

$('D1 '). setdraggable (true); // you can drag the settings.

Then the object can be dragged. If you want to set the event, you can:

 
$ ('Drag '). on ('dragstart', function (e) {console. log (E. type );}). on ('drag', function (e) {console. log (E. type );}). on ('dragend', function (e) {console. log (E. type );});
 

You can also set events for the target element to process the events that are dragged to the current element.

$('Zone1 '). On ('dragenter', function (e ){
Trace ("dragenter ");
Return false;
}). On ('dragover', function (e ){
Trace ("dragover ");
Return false;
}). On ('dragleave ', function (e ){
Trace ("dragleave ");
Return false;
}). On ('drop', function (e ){
Trace ("Drop ");
});

The following describes how to implement it:

For drag, mouse event simulation is required.

First, write three functions: Processing mousedown, mousemove, and mouseup, respectively. This is relatively simple and not much nonsense.

 

 

Function mousedown (e) {// left button to continue if (E. Which! = 1) return; // The initialization position. // Temporarily Save the target that causes the event. Drag.tar get = This; // manually trigger dragstart this. trigger ('dragstart', e); document. on ('mouseup', mouseup ). on ('mousemove ', mousemove);} function mouseup (e) {// left button to continue if (E. which! = 1) return; // manually trigger dragend this. Trigger ('dragend', e); // notification that a drop event has occurred. Drag. ondrop (E); document. UN ('mousemove ', mousemove ). UN ('mouseup', mouseup);} function mousemove (e) // manually trigger drag this. trigger ('drag', e); // move the target .}
 

The next step is to implement drop. How can we correctly determine the current element to be above when an element is dragged and trigger the drop event for that element?

Solution:

Determine whether the mouseenter event occurs in the target zone and whether the mouseenter event is being dragged. If both mouseenter and drag occur, dragenter occurs.

 

Solution B:

When dragging, the coordinates (bound) and current elements of the target position are constantly calculated. If you enter, dragenter occurs.

Therefore, first write a function to determine whether it is in the target:

 

 
Function isenter (bound, box) {return (bound. right <box. right & bound. right> box. left) | (bound. left <box. right & bound. left> box. left) & (bound. bottom <box. bottom & bound. bottom> box. top) | (bound. top <box. bottom & bound. top> box. top ));}
 

In the drag, check whether the current bound and target meet the requirements. If yes, continue to judge:

 

Function raiseevent (e) {If (isenter (bound, box) {// if the last region is the same as the current region, a dragover if (drap. zone = Zone) {zone. trigger ('dragover', e);} else {// if it was not in a zone last time, it indicates it leaves a zone if (drap. zone) drap. zone. trigger ('dragleave ', e); drap. zone = zone; // Save the current zone. trigger ('dragenter', e); Return ;}// the zone that is not activated now. However, if (drap. zone) {drap. zone. trigger ('dragleave ', e); drap. zone = NULL ;}}
 

In this way, you can complete dragdrop.

 

 

 

 

The specific source code will be sent together later.

Xcould QQ 744257564