Sample code sharing for js native drag and drop

Dragable

Images, links and text in web pages can be dragged by browser by default, HTML5 All HTML elements are provided with a draggable attribute. When the value of this attribute is true, the element is considered draggable.

When dragging an image or link, place the mouse on the image or link. , you can drag it by holding down the mouse. When dragging text, select the text first, and then drag the selected text like an image.

is triggered in sequence: dragstart, drag, dragend events. The targets of these three events are the dragged elements. When the mouse button is pressed and the mouse starts to be moved, it will be on the dragged element. Trigger the dragstart event. After the dragstart event is triggered, the drag event will be triggered immediately, and the drag event will continue to be triggered while the element is being dragged; when the drag stops, whether the element is placed on a valid placement target or an invalid placement target, Trigger dragend event.

Place target element event

When an element is dragged to a valid drop target, it will trigger once: dragenter, dragover, dragleave or drop event

As long as an element is dragged to the drop target The dragenter event will be triggered on the target, followed by the dragover event, and the dragover event will continue to be triggered when the dragged element is still moving within the range of the placement target; if the element is dragged out of the placement target, the dragover event will be triggered. If the dragover event is no longer triggered, the dragleave event will be triggered. If the element is placed in the drop target, the drop event will be triggered instead of the dragleave event. The targets of these events are the elements that are the drop targets.

Good support, not so good on Firefox

Custom placement target

We can turn any element into a valid placement target by overriding the default

In FF, the placement event The default behavior is to open the URL dropped on the drop target. In other words, if you drag and drop an image onto the drop target, the page will redirect to the image file; if you drag and drop text on the drop target, it will redirect to the image file. Resulting in an invalid URL error.

Therefore, in order for FF to support normal drag and drop, it is necessary to cancel the default behavior of the drop event and prevent it from opening the URL.

The biggest feature of native drag and drop is that it can. Use drag-and-drop events to transfer data, so that the browser can natively support drag-and-drop interaction functions similar to desktop applications. To use the data transfer function, you need an

called dataTransfer.

The dataTransfer object is a property of the event object. It has two main methods: getData() and setData(). setData() is used to save the value, and getData() is used to obtain the value saved by setData(). When dragging the text in the text box, the browser will call the setData() method to save the dragged text in the dataTransfer object in "text" format. Similarly, when dragging and dropping a link or image, the setData() method will be called and the URL will be saved. Then, when these elements are dragged and dropped into the drop target, the data can be read through the getData() method.

The saved data type is "text" or "url". In HTML5, these two data types are mapped to "text/plain" and "text/uri-list"

Save data as text and URL There is a difference. If you save the data in text format, the data does not receive any special treatment. If you save the data as a URL, the browser will treat it as a link in the web page. In other words, if you place it in another browser window, the browser will open the URL.

Demo:

Text drag and drop:

拖动文本到矩形框中:

链接到百度

Picture drag and drop:

拖动图片到矩形框中:

Picture drag and drop:

dropEffect and effectAllowed properties

Using the dataTransfer object, not only can data be transferred , which can also be used to determine what operations the dragged element and the drop target element can receive. This requires access to two of its properties: the dropEffect property and the effectAllowed property.

dropEffect The browser will display different types of cursors according to different values ​​to improve the user's behavior after placing them. dropEffect includes the following values:

•"none": The dragged element cannot be placed here

•"move": The dragged element should be moved to the drop target

•"

": It should Copy the dragged element to the drop target

•"link":表示放置目标会打开拖动的元素 (但拖动的元素必须是一个链接，有URL)

浏览器仅仅会帮你改变光标的类型，但是要实现怎样的效果都是要开发者自己去实现。

dropEffect属性只有搭配effectAllowed属性才有用，effectAllowed属性表示允许拖动元素的哪种dropEffect行为，它的值有以下几种：

•"uninitialized":没有给被拖动的元素设置任何放置行为。

•"none": 被拖动的元素不能有任何行为

•"copy“：只允许值为 “copy” 的放置行为

•"link":只允许值为 “link” 的放置行为

•"move"：只允许值为 “move” 的放置行为

•"copyLink"： 允许值为 “copy” 和 “link” 的放置行为

•"copyMove"： 允许值为 “copy” 和 “move” 的放置行为

•"linkMove"： 允许值为 “link” 和 “move” 的放置行为

•"all"： 允许所有放置行为

必须在ondragstart事件处理程序中设置effectAllowed属性

Demo

  
  



  链接到百度
  

  

  
  

Demo2:

  
  



链接到百度
  
哈哈哈哈
  

  

  
  

 以上就是js原生拖放的示例代码分享的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！