HTML and CSS Reference
In-Depth Information
var drop = document.getElementById("dropzone");
Each of these events contains a new event property called dataTransfer. This property is
used to customize the drag and drop and to pass data from the drag element to the drop
element. It supports the following properties itself:
dropEffect Indicates the type of drag and drop expected for the drop zone. If it
does not match the effectAllowed set in the drag element, then the drop will be
canceled. The options are none , copy , link , and move ; for example:
e.dataTransfer.dropEffect = "copy";
effectAllowed Indicates the types of drag and drop that the dragging element
will allow. If it does not match the dropEffect in the drop zone, then the drop will
be canceled. The options are none , copy , copyLink , copyMove , link , linkMove ,
move , all , and uninitialized ; for example:
e.dataTransfer.effectAllowed = "move";
types Presents a list of content types that the draggable data contains :
if (e.dataTransfer.types.contains("text/html")){
//do something;
clearData() Resets the data in the drag element.
setData(format,data) Sets data to be sent to the drop zone. The format field
expects a string to indicate the format of the data being passed.
e.dataTransfer.setData("text/plain","Simple String");
e.dataTransfer.setData("text/html","<strong>HTML String</strong>");
getData( format ) Fetches the data set by the drag item. Only returns the data
that matches the format type.
e.dataTransfer.getData("text/html"); //returns <strong>HTML String</
setDragImage( element , x , y ) When an item is being dragged, it is possible for
the drag shadow to be set to any element . It can be an element on the page, an image,
a newly created element, or even a canvas drawing. The x , y coordinates indicate
where the mouse should attach to the shadow.
With the methods and properties exposed in the dataTransfer property, the drag
and drop is quite powerful. One exceptional feature is the ability to drag anything
into a drop zone and retrieve the content via getData() . This includes URLs from
the address bar, HTML from other pages, and text from Notepad documents.
Search WWH ::

Custom Search