HTML5 drag-and-drop implementation

Brief introduction:

The earliest introduction of the JavaScript drag-and-drop feature in Web pages is IE4. At the time, only two of the objects in the Web page could be dragged and dropped: images and some text. Drag and drop the image, put the mouse on the image, hold down the mouse and then you can drag and drop it. To drag and drop text, select the text first, and then drag and drop the selected text just like you would drag and drop an image. In IE4, the only valid drop target is the text box. By the IE5, drag-and-drop functionality has been expanded, new events have been added, and almost any element in the Web page can be used as a drop target. IE5.5 further allows any element in the page to be dragged and dropped. HTML5 specifies a drag-and-drop specification based on an instance of IE.

First, the basic interpretation
1 to achieve drag and drop effect
* What is the file you want to drag and drop? -source Element
* Where do you want to drag and drop? -Target Element
2 Current drag-and-drop effect
* Using native DOM can be implemented-the most troublesome
* Plug-in with jquery-drag effect
* Drag and drop function available in HTML5
Second, HTML5 in the implementation of drag-and-drop
1. SOURCE Element Events
* DragStart-triggered when the mouse starts to drag and drop
* Drag-similar to MouseMove event during mouse drag and drop
* Dragend-triggered when mouse over drag and drop

 1  //  2  Myimg.addeventlistener ("DragStart" ,mydragstart);  3  Myimg.addeventlistener ("Drag" ,mydrag);  4  Myimg.addeventlistener ("Dragend", mydragend); 

2. Target element Event
       * dragenter-triggered when mouse drag and drop into target element
        * DragOver-When the mouse reaches the current element is triggered
         * For the event to increment Plus Event.preventdefault ();
       * Drop-triggered when the mouse implements a drag-and-drop effect
          * This event is not triggered by default
    * reason-HTML page by default, drag-and-drop is not allowed
     * called Default behavior for HTML pages
    * Resolve-block default behavior of pages
     event Object Event.preventdefault ( ) Method
       * DragLeave-when the mouse drag and drop away from the target element is triggered

 1  //  2  D2.addeventlistener ("DragEnter") for the target element ,mydragenter);  3  D2.addeventlistener ("DragOver" ,mydragover) ; 4  D2.addeventlistener ("Drop" ,mydrop);  5  D2.addeventlistener ("DragLeave", mydragleave); 

　　3. DataTransfer Objects
* Function-functions similar to the Clipboard of window System
* function
* The source element information (data) can be stored here
* The source element information stored in the object, provided to the target element
* Method
* SetData ()-Set (source element) data
* used in Source element events
* GetData ()-Gets the data set
* used in Target element events
* ClearData ()-Clears (set) data
* All data content, stored in browser memory
* When the data content is finished, clear
* Setdragimage () method
* Function-Modify the drag and drop process, the mouse follows the picture effect
* Usage-drag, DragStart and other events
* Note-In practice, this method hardly

4. Can be dragged

By default, images, links, and text can be dragged, that is, users can drag them without having to write extra code. Text can be dragged only if it is selected, and images and links are dragged at all times.

It is also possible for other elements to be dragged. HTML5 Specifies a draggable property for all HTML elements, indicating whether the element can be dragged. Draggable of images and links
The property is automatically set to True, and the default value for the property of the other element is false. You can set this property to allow other elements to be dragged, or to have the image or link not drag. For example:

1 <!--let this image not be dragged -2 <imgsrc= "Smile.gif"draggable= "false"ALT + "Smiley face">3 <!--let this element be dragged -4 <Divdraggable= "true">...</Div>

Browsers that support draggable properties are ie10+, Firefox 4+, Safari 5+, and Chrome. Opera
The drag-and-drop feature of HTML5 is not supported in both 11.5 and previous versions. In addition, to make Firefox
Support for draggable properties, you must also add a Ondragstart event handler and save some information in the DataTransfer object.

　　5.dropEffect and effectallowed

The DataTransfer object can be used not only to transmit data, but also to determine which elements are being dragged and what actions to take as the elements of the drop target. To do this, you need access to the two properties of the DataTransfer object: DropEffect and effectallowed.

The DropEffect property lets you know what kind of placement behavior the dragged element can perform. This property has the following 4 possible values.

　　　　　　

1. "None": the dragged element cannot be placed here. This is the default value for all elements except the text box.

2. "Move": the dragged element should be moved to the drop target.

3. "Copy": The dragged element should be copied to the drop target.

4. "Link": Indicates that the drop target will open the dragged element (but the dragged element must be a link with a URL).

To use the Dropefect property, you must set it in the Ondraggenter event handler for the drop target.

The DropEffect property is only useful with the Effectallowed property. The Effectallowed property represents the possible values for the Dropeffect,effectallowed property that allow drag-and-drop elements as follows.

1. "Uninitialized": there is no drag element placement behavior.

2. "None": the dragged element cannot have any behavior.

3. "Copy": Only DropEffect with the value "copy" is allowed.

4. "Link": Only the DropEffect value of "link" is allowed.

5. "Move": only DropEffect with a value of "move" is allowed.

6. "Copylink": Allows DropEffect with a value of "copy" and "link".

7. "Copymove": Allows DropEffect with a value of "copy" and "link".

8. "Linkmove": Allow DropEffect of positions "link" and "Move"

9. "All": Allows arbitrary dropeffect.

You must set the Effectallowed property in the Ondraggstart event handler.

Picture drag and drop example in two div

HTML section

1   <DivID= "D1">2     <imgID= "Myimg"src= "Bg.jpg" />3   </Div>4 5   <DivID= "D2"></Div>

Js

1     //get a picture and two div elements2     varD1 = document.getElementById ("D1"),3myimg = document.getElementById ("myimg"),4D2 = document.getElementById ("D2");5     //bind a picture to a DragStart event6Myimg.addeventlistener ("DragStart", Mydragstart);7     8     //bind Dragover,drop Two events to the second Div9D2.addeventlistener ("DragOver", mydragover);TenD2.addeventlistener ("Drop", Mydrop); One     //bind Dragover,drop Two events to the first Div AD1.addeventlistener ("DragOver", mydragover); -D1.addeventlistener ("Drop", Mydrop); -  the     //the handler function for the image to start dragging events -     functionMydragstart (event) { -         varMyData = myimg.id;//Save ID Value -         vartrans =Event.datatransfer; +Trans.setdata ("Text", MyData); -     } +     //The handler is the default behavior for blocking the page A     functionMydragover () { at Event.preventdefault (); -     } -     //Drop handler function -     functionMydrop (event) { -         // -         vartrans = Event.datatransfer;//Get Data Save Object in         varMYSRC = Trans.getdata ("text");//Image ID -         varEle = document.getElementById (MYSRC);//get to Picture object to         if(Ele! = event.srcelement)//determine if the picture is moving +         { -Event.srcElement.appendChild (Ele.parentNode.removeChild (ele));//cut an IMG element into the target Div the         } *  $Trans.cleardata ("text");//Clear DataPanax Notoginseng}

HTML5 drag-and-drop implementation