Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to achieve drag-and-drop effect in web front-end". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to achieve drag-and-drop effect in web front-end" can help you solve the problem.

I. what is drag and drop

Drag and drop is through the mouse over an object, press and hold the mouse can hold an object to another position.

II. Drag and drop events

In IE4, Js can implement drag-and-drop functionality, which only supports drag-and-drop images and some text. Later, with the update of the IE version and the gradual improvement of drag-and-drop events, HTML5 developed the specification with the drag-and-drop functionality of IE, which is supported by Firefox 3.5, Safari 3 +, chrome and later versions.

By default, images, links, and text in a web page can be dragged, while if the rest of the elements want to be dragged, they must set the draggable property to true, which is a new attribute specified by HTML5 to set whether the element can be dragged. Therefore, the draggable attribute for images, links, and text defaults to true, and the draggable attribute for other elements defaults to false.

There are two concepts when implementing the drag-and-drop function, namely, the dragged element and the target element, both of which have their own supported events, so let's take a look at

(1) the event of the dragged element

The events supported by the dragged element are shown in the following table

Event meaning dragstart triggers drag drag when it is ready to drag the dragged element (frequently triggered) triggered at the end of the dragend drag

Let's test these three events with an example:

Document .box {width: 100px; height: 100px; background-color: lightgreen;} let box = document.querySelector ('.box') / / bind dragstart event box.addEventListener ('dragstart', function () {console.log (' drag begins') }) / / bind drag event box.addEventListener ('drag', function () {console.log (' element is dragged');}) / / bind dragend event box.addEventListener ('dragend', function () {console.log (' drag end');})

(2) events of the target element

In the process of implementing the drag-and-drop function, there are three events on the target element

Event meaning triggered when dragenter is dragged into the target element dragover is triggered when the dragged element is inside the target element (frequently triggered) dragleave is triggered when the dragged element leaves the target element drop is triggered when the dragged element is dropped into the target element

Here I would like to explain in detail the trigger rules for these three events:

The dragenter event is similar to the mouseover event, so how does it count as being dragged and dropped into the target element? After testing, it is found that when more than half of the area of the dragged and dropped element is in the target element, it is counted as entering the target element.

The dragover event is special. It will always trigger when you drag and drop the element into the target element, just like you set an infinite loop timer, even if you do not move the element, unless the drag-and-drop event ends or is dragged away from the target element.

The trigger condition of the dragleave event is exactly the opposite of the dragenter event. It is triggered when the dragged element leaves the target element. After testing, the condition for leaving the target element is that more than half of the area of the dragged and dropped element leaves the target element.

The drop event, which can be called a drop target event, is triggered when a dragged and dropped element is placed in the target element. Although any element supports this event, all elements are not allowed to be placed by default, so the event will not be triggered without any processing.

Similarly, let's take a look at the first three events with specific examples:

Document .box {width: 100px; height: 100px; background-color: lightgreen;} .location {width: 100px; height: 100px; background-color: lightpink } let located = document.querySelector ('.location') / / bind dragenter event located.addEventListener ('dragenter', function () {console.log (' element entered target element') }) / / bind dragover event located.addEventListener ('dragover', function () {console.log (' element within the target element');}) / / bind dragleave event located.addEventListener ('dragleave', function () {console.log (' element leaves the target element');})

So finally, let's take a look at how to trigger the drop event by blocking the default behavior of the dragenter event and the dragover event.

Document .box {width: 100px; height: 100px; background-color: lightgreen;} .location {width: 100px; height: 100px; background-color: lightpink } let located = document.querySelector ('.location') located.addEventListener ('dragenter', function (e) {e.preventDefault ()}) located.addEventListener (' dragover', function (e) {e.preventDefault ()}) located.addEventListener ('drop' Function () {console.log ('element is placed') })

It is worth noting that when you drag a dragged element into the target element before we handle the drop event, the mouse style becomes prohibited.

3. DataTransfer object

The above simply implements the drag-and-drop function, but there is no use to use this function to make any practical function. Here we introduce a particularly important attribute on the event object in a drag-and-drop event-- dataTransfer.

We get the object through event.dataTransfer, and its main function is to pass a string data from the dropped element to the target element.

(1) method

There are two methods on dataTransfer, as shown in the following table

Method meaning setData sets the string and sets the data type getData to get the string of the corresponding data type

The setData () method accepts two parameters, the first parameter represents the data type of the string, and HTML5 specifies two data types, text/plain and text/uri-list, the former representing the ordinary string and the latter representing the URL string; the second parameter is the string used for storage

The getData () method receives only one parameter, the type of string that needs to be received.

Let's simply use these two methods:

Document .box {width: 100px; height: 100px; background-color: lightgreen;} .location {width: 100px; height: 100px; background-color: lightpink } let box = document.querySelector ('.box') / / bind the dragstart event box.addEventListener ('dragstart', function (e) {/ / set the string e.dataTransfer.setData (' text/plain') of type text/plain to the dropped element Let located = document.querySelector ('.location') located.addEventListener ('dragenter', function (e) {e.preventDefault ()}) located.addEventListener (' dragover', function (e) {e.preventDefault ()}) located.addEventListener ('drop') Function (e) {/ / gets the string let res = e.dataTransfer.getData ('text/plain') console.log (res) when dropping the dragged element into the target element })

(2) attribute

There are also two more commonly used properties on the dataTransfer object, as shown in the following table

Attribute meaning drop behavior of dropEffect dragged element Placement behavior supported by effectAllowed target element

First of all, these two attributes need to be used together, they determine the relationship between the dragged element and the target element, when the relationship between the two is set, when dragging, the mouse will display different styles according to different relationships, but there is no other special function.

DropEffect can set the following properties

The value means the none default value. You can't put the dragged element here. Move should move the dragged element to the target element. Copy should copy the dragged element to the target element. Link means that the target element will open the link corresponding to the dragged element.

[note]: the dropEffect property must be set in the dragenter event, otherwise it is invalid

EffectAllowed can set the following properties

The value means that the uninitialized dragged and dropped element is not set for placement. The none dragged element cannot have placement. Copy only allows dropEffect target elements with a value of 'copy'. Link only allows dropEffect target elements with a value of' link'. Move only allows dropEffect target elements with values of 'move'. CopyLink only allows dropEffect target elements with values of' copy' and 'link'. Copymove only allows values of' copy' and 'move'. DropEffect target element linkMove only allows dropEffect target elements with values of 'link' and' move' all only allows dropEffect target elements of any value

[note]: the effectAllowed property must be set in the dragstart event, otherwise it is invalid

As mentioned above, these two properties are basically only used to change the mouse style, so if we want to achieve specific functions, we have to rewrite the event handler ourselves.

Let's take a look at an example of drag and drop:

Requirements: drag and drop a piece of text into an element

Because text is a drag-and-drop element supported by default, we don't have to do any event binding to it.

Document .location {width: 100px; height: 100px; border: 1px solid black } I am a test text let located = document.querySelector ('.location') located.addEventListener ('dragenter', function (e) {e.dataTransfer.dropEffect =' copy' e.preventDefault ()}) located.addEventListener ('dragover' Function (e) {e.preventDefault () located.addEventListener ('drop', function (e) {e.target [XSS _ clean] = e.dataTransfer.getData (' text/plain')}) about "how to achieve drag-and-drop effect in web front-end" ends here. Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.