آموزش html5

drag & drop in html

سلام
در بخش سی و ششم آموزش HTML5 در مورد drag & drop صحبت می کنیم.
دو عبارت drag و drop به ترتیب به معنی کشیدن و رها کردن که برای جا به جا کردن عناصر در صفحه وب استفاده می شوند.

Drag and drop is a very common feature. It is when you “grab” an object and  it to a different location.
In HTML5, it is part of the standard, and any element can be draggable.
First of all: To make an element draggable, set the draggable attribute to true:
Then, specify what should happen when the element is dragged.
In the example above, the ondragstart attribute calls a function, drag(event), that specifies what data to be dragged.
The dataTransfer.setData() method sets the data type and the value of the dragged data:
The ondragover event specifies where the dragged data can be dropped.
By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element.
This is done by calling the event.preventDefault() method for the ondragover event:
When the dragged data is dropped, a drop event occurs.
In the example above, the ondrop attribute calls a function, drop(event):
Call preventDefault() to prevent the browser default handling of the data (default is open as link on drop)
Get the dragged data with the dataTransfer.getData() method. This method will return any data that was set to the same type in the setData() method
The dragged data is the id of the dragged element
Append the dragged element into the drop element

   دانلود