Drag and Drop are part of the HTML5 standard.
Browser support
Internet Explorer 9, Firefox, Opera 12, Chrome, and Safari 5 support drag and drop.
Drag element, dragelement:
1. Add event: ONDRAGSTART 2. Add attributes: DragablePlace element, DropElement:
1. Add events: ONDARGENTER, ONDRAGOVER, ONDRAGLEAVE, ONDRAGEND, ONDROP
It is similar to the incidents of mouser into the classification, and it is well understood. It is not repeated. The following examples will be used to illustrate.
1. Drag and drop between elements on the page
Let's use a small example below, the drag and drop between the div is displayed, how each event is triggered:
<! Doctype html> <html> <head> <Title> </Title> <meta charset = UTF-8/> <STYLE TYPE = Text/CSS> #Dropele Div {float: left;} </style> <Script src = ../../jQuery-1.8.3.js Type = Text/Javascript Charset = UTF-8> </Script> <Script Type = Text/JavaScript>/*** Drag (DRAG and DROP) is. HTML5 standard component. * Browser supports* Internet Explorer 9, Firefox, Opera 12, Chrome, and Safari 5 support drag and drop. */ $ (fuins () {$ (#Dragele) [0] .ondragstart = Function (Event) {console.log (drawstart); Event.datatransfer.SetData (text, event.target.id);}; /* * * When the dragging data is placed, the Drop event occurs. ) [0] .NDROP = Function (Event) { / * for (var p in event.datatransfer) {console.log (p + = + event.datatransfer [p] + @@);} * / console.log ( ONDROP); var ID = event.datatransfer.getdata (text); $ (this) .appnd (# + ID) .clone (). Text ($ (project) .d (div) .Length))); .preventdefault ();}; /** * ONDRAGOVOVER event specifies where to place the dragged data. The default processing method. unction (Event) {Console.log (ONDROP ENTER);} $ (#Dropele) [0] .ondragleave = Function (EVENT) {console.log (ONDROP Leave); = function (Event) {Console.log (ONDROP END);}}); </script> </head> <body> <div style = border: 1px solid red; width: 100px; height: text-align: C Enter ; Line-Height: 100px; Draggable = True ID = DRAGELE> </DIV> <DIV STYLE = Width: 330px; Min-Height: 202px; Border: 1px Solid #444; MARGIN-TOP: 20px; O. verflow-y: scroll ; ID = Dropele> </DIV> </Body> </html>You need to pay attention to:
A. Ontragover must organize the default behavior of the event. The default is not to place the data/elements into other elements.
B. The default behavior of the Drop event is opened in a link, so it also needs to prevent its default behavior.
It is also possible to notice that when dragging and dropping, the event contains an event.datatransfer object. In the above example, we used the Setdata method of the object to convey the ID of the dragging DIV, then obtain the ID in the Drop, and copy it. The element is added to the placed div.
Here are other methods of the object:
Event.datatransfer:
items = [Object Datatransferntemlist] @@ Drag_drop.html: 44
Files = [Object Filelist] @@ Drag_drop.html: 44
Types = Text/Plain @@ Drag_drop.html: 44
effectalOwed = all @@ drag_drop.html: 44
Dropeffect = None @@ Drag_drop.html: 44
cleartata = function cleanata () {[native code]} @@ drag_drop.html: 44
getdata = fuory getdata () {[native code]} @@ drag_drop.html: 44
setdata = function setdata () {[native code]} @@ drag_drop.html: 44
setdragimage = Function setdragimage () {[native code]} @@
I used JS to print out all its attributes:
1. Getdata, Setdata's examples have been used in the above example, Cleardata is to clear the settings data.
2. It is worth noting that Files. When one or more files selected in the operating system are dragged into the div, the information of the file will be stored in the file. Upload.
3. Setdragimage (image, x, y) is used to set the renderings of moving with the mouse during mouse movement. Must be set in Dragstart.
4. Types, Effectallowed, and DropFFECT are the types of dragging into the element. During the dragging process, the style displayed by the mouse. I think these attributes can be ignored, which are generally not used.
The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.