Implement drag-and-drop steps, related events, methods

1. Set the Draggable property of the object element you want to drop to true (Draggable = "true"). This allows the element to be dragged and dropped. NOTE: the IMG element and a element (must specify HREF) are allowed by default for drag-and-drop.

2. Write event-handling code related to drag-and-drop.

About the event?:

DragStart: triggered when a page element starts dragging.

Drag: The dragged element continues to trigger during the drag process. DragEnter: The dragged element is triggered when it enters the target element, and the event should be monitored on the target element. DragLeave: The dragged element is triggered when it leaves the target element, and the event should be monitored on the target element. DragOver: The dragged element remains in the target element while it is continuously triggered, and the event should be monitored on the target element. Drap: The dragged element, or the file selected from the file system, is triggered when the drop is dropped. Dragend: triggered when a page element is dragged at the end. All of these events can specify a callback function. Here is an example of a callback function

Drag and Drop code:

A "I Love you China" will be added to each drag and drop.

Please drag and drop

Implement the Init () function:

function init ()

{var Source = document.getelementbyidx_x ("Dragme"); var dest = document.getelementbyidx_x ("text");}

Drag and drop to start:

? Source.addeventlistener ("DragStart", function (EV)

{//Append data to DataTransfer object var dt = Ev.datatransfer;                   dt.effectallowed = ' all ';                 (2) Drag element is Dt.setdata ("Text/plain", this.id);             Dt.setdata ("Text/plain", "I Love You China"); }, False);

Dragend: End of drag and drop:

? Dest.addeventlistener ("Dragend", function (EV)

{//Do not perform default processing (Deny drag and Drop) Ev.preventdefault (); }, False);

Drop: Dragged and dropped:

Dest.addeventlistener ("Drop", function (EV) {

               //Get data from DataTransfer objects                  var dt = ev.datatransfer;                var text = dt.getdata ("Text/plain");                 dest.textcontent + = text;               //(5) Do not perform default processing (Reject drag and drop)                  Ev.preventdefault ();                //Stop event propagation                  ev.stoppropagation ();           }, False);         }

? Set page properties, do not perform default processing (Deny drag and drop):

Document.ondragover = function (e) {

E.preventdefault ();}; Document.ondrop = function (e) {E.preventdefault ();}

? Start dragging (DragStart event):

The dragged data is stored in the DataTransfer (SetData () method). The DataTransfer object is designed to store the data to be carried when dragging and dropping, and it can be set to drag and drop the DataTransfer property of the event object.

SetData has two parameters: the first parameter is a string of data types that carry data, and can only be filled in with text that resembles "Text/plain" or "text/html" for MIME type, and cannot be filled in with other text. The second parameter is the data to be carried

The event object. Preventdefault ():

? The event object. Preventdefault () method must be called within the Dragend and DragOver events. Because by default, the target element of the drag and drop is not allowed to accept the element, in order to drag and drop the element into it, the default processing must be turned off

The target element uses the GetData () method:

After the target element is accepted to the dragged element, the GetData () method is executed to obtain the data from the datatransfer.

The parameter of the GetData () method is the data type specified in the SetData () method

Attention??

To implement the drag-and-drop process, you must also turn off default processing in the drop event of the target element (deny drag-and-drop), or the target element cannot accept the dragged element.

To implement the drag-and-drop process, you must also set the entire page to not perform the default processing (Deny drag-and-drop), or drag-and-drop processing cannot be implemented. Because the page is dragged and dropped before other elements, the elements on other pages cannot accept drag and drop if the page refuses to drag and drop. Because the type of data in this example uses the MIME type "Text.plain", you can also drag and drop data from that type into the target element from other applications that use the same MIME type.

MIME types currently supported for drag processing: text/plain: Text text text/html:html text text/xml:xml text Text/uri-list:url list, one line per URL

DataTransfer object:

During the drag process, the callback function accepts an event argument that has a DataTransfer property. It points to an object that contains various information related to the drag.

Draggableelement.addeventlistener (' DragStart ', function (event) {event.dataTransfer.setData (' text ', ' Hello world! ');}) The above code, when dragged, stores a text message on the DataTransfer object with the content "Hello world". When the drag and drop is complete, you can use the GetData method to remove this message.

? properties of the DataTransfer object:

DropEffect: Drag-and-drop operation type that determines how the browser displays the mouse shape, with possible values of copy, move, link, and none.

Effectallowed: Specifies the allowed operation, the possible values are copy, move, link, copylink, Copymove, Linkmove, all, none, and uninitialized (the default value, equivalent to all, That allows everything to be done). Files: Contains a FileList object that represents the files involved in dragging and dropping, primarily for processing files dragged from the file system into the browser. Types: The type of data stored in the DataTransfer object. Methods for DataTransfer objects: SetData (format, data): Stores data on DataTransfer objects. The first parameter, format, is used to specify the type of data stored, such as text, URLs, text/html, and so on. GetData (format): Extracts data from the DataTransfer object. ClearData (format): Clears the data stored by the DataTransfer object. If the format parameter is specified, only the formatted data is cleared, otherwise all data is cleared. Setdragimage (imgelement, X, y): Specifies the image to display during drag. By default, many browsers display a semi-transparent version of a dragged element. The parameter imgelement must be an image element, not a path to the image, and the parameter x and Y represent the position of the image relative to the mouse.

? Getdata,setdata Method:

?? Getdata,setdata, these two methods:

1. The SetData method stores data in the DataTransfer object at the start of a drag-and-drop, using the Types property to specify the MIME type of the data. 2. The GetData method reads the data in the DataTransfer object at the end of the drag ClearData method can be used to clear the data within the DataTransfer object. If you add "Dt.cleardata ()" Before the Code GetData () method above, then no data will be placed in the target element.

Implement drag-and-drop steps, related events, methods