"HTML" learning record

Drag and drop (drag and Drop)

Implements the drag target and places it in the specified area.

Makes an element draggable, involving the global properties of the element draggable

<draggable= "true"/>

That is, the IMG element is set to draggable.

To explore the mouse event properties for HTML, you need to assign the ondragstart attribute to the IMG and assign ondrop and ondragover attributes to the Div.

First, you need to determine the drag object, that is, you need to get the data of the drag element, where the SetData method of the DataTransfer object is used, and the method named Drag (EV) is called, then it is defined as follows:

function drag (EV) {  ev.dataTransfer.setData ("Text", ev.target.id);}

When the draggable data is drop, the first drop zone div is to allow the IMG to be placed here, which is to invoke a function with the OnDragOver property, using the method Preventdefault (), Set the function named AllowDrop (EV):

function AllowDrop (EV) {  ev.preventdefault ();}

The drop event is executed when the dragged element is drop. Use the appendchild method of the Body object (that is, "additional behavior"). Use GetData () to get the element data "attached" to the drop destination, passed to OnDrop (), where the data is the IMG element data previously obtained by SetData (). Set method to drop:

function Drop (EV) {  var data=ev.datatransfer.getdata ("Text");  Ev.target.appendChild (document.getElementById (data));  Ev.preventdefault ();  Alert ("233");}

GetData method for 1.dataTransfer objects, obtaining IMG data

The AppendChild method of the 2.target object, appending the newly acquired IMG data to the original DIV element data

The getElementById method of the 3.document object,

Full code:

<P>Move the picture to the Div</P><DivID= "Div1"OnDrop= "Drop (event)"OnDragOver= "AllowDrop (event)" ></Div><imgID= "Drag1"src= "Http://www.gbtags.com/gb/laitu/100x100&text=GBtags/efb73e/FFFFFF"draggable= "true"ondragstart= "Drag (event)"></img><styletype= "Text/css">Div{width:100px;Height:100px;padding:10px;Border:1px solid #CCC;}        </style><Script>functiondrag (EV) {Ev.dataTransfer.setData ("Text", ev.target.id);}functionAllowDrop (EV) {Ev.preventdefault ();}functionDrop (EV) {varData=Ev.dataTransfer.getData ("Text");    Ev.target.appendChild (document.getElementById (data));    Ev.preventdefault (); Alert ('Move successfully!');}</Script>

View Code

Profile: http://www.jb51.net/shouce/dhtml/objects/DD.html

"HTML" learning record