HTML5 Drag and Drop (Drag and Drop) details and examples, html5drag

Source: Internet
Author: User

HTML5 Drag and Drop (Drag and Drop) details and examples, html5drag
Introduction

Drag and Drop is a common feature, that is, to drag an object to another position after it is captured.

In HTML5, drag and drop is part of the standard, and any element can be dragged and dropped.

Click a small example: execute JavaScript when the user starts to drag the <p> element.

<P draggable = "true" ondragstart = "myFunction (event)"> drag me! </P>

Tip: links and images can be dragged by default, and the draggable attribute is not required.

Definition and usage

The following events are triggered during drag-and-drop:

    • Trigger an event on the drag target(Source Element):
      • Ondragstart-triggered when the user starts to drag an element
      • Ondrag-triggered when the element is being dragged
      • Ondragend-triggered after the user completes element dragging
    • Events triggered when the target is released:
      • Ondragenter-this event is triggered when an object dragged by the mouse enters its container range.
      • Ondragover-this event is triggered when a dragged object is dragged within the range of another object container
      • Ondragleave-this event is triggered when an object dragged by the mouse leaves its container range.
      • Ondrop-this event is triggered when the mouse key is released during a drag process.
Browser support

Internet Explorer 9 +, Firefox, Opera, Chrome, and Safari support dragging.

Note:Safari 5.1.2 does not support drag. When dragging an element, the ondragover event is triggered every 350 milliseconds.

Instance

Paste the code first and then explain it one by one:

<! DOCTYPE html> 

The page effect before dragging is:

Next we will parse the meaning of the above Code.

Drag and Drop setting Elements

First, set the draggable attribute to true to make the element drag:

Drag-ondragstart and setData ()

Then, specify what will happen when the element is dragged.

In the preceding example, the ondragstart attribute calls a function, drag (event), which specifies the data to be dragged.

The dataTransfer. setData () method sets the data type and value of the dragged data:

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

In this example, the data type is "Text", and the value is the id ("drag1") of the element that can be dragged ").

Where to put-ondragover

The ondragover event specifies where to place the dragged data.

By default, data/elements cannot be placed in other elements. To allow placement, We must block the default Processing Method for elements.

You need to call the event. preventDefault () method of the ondragover event:

event.preventDefault()
Place-ondrop

A drop event occurs when data is dragged.

In the above example, the ondrop attribute calls a function, drop (event ):

function drop(ev){    ev.preventDefault();    var data=ev.dataTransfer.getData("Text");    ev.target.appendChild(document.getElementById(data));}

Code explanation:

  • PreventDefault () is called to prevent the browser from processing data by default (the default action of the drop event is to open in the form of a link)
  • Use the dataTransfer. getData ("Text") method to obtain the dragged data. This method returns any data set to the same type in the setData () method.
  • Dragged data is the id of the dragged element ("drag1 ")
  • Append the dragged element to the placed element (target element ).

Implementation result

Firefox drag and drop

However, we found a problem in Firefox:

PreventDefault is used for html5 drag-and-drop to prevent new pages from being popped up, but does it work in Firefox?

Solution:

document.body.ondrop = function (event) {    event.preventDefault();    event.stopPropagation();}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.