Drag to sort the list and change the size. Previously, jQUERy-UI was used. It uses mousedown, Mousemove, and mouseup to achieve the effect of a page element being dragged by the mouse. Vue-drag-resize vuedraggable: codepen. IO /lujun-zhou/… .

HTML5 directly provides a drag and drop API, as long as the element by listening to the drag and drop events can achieve a variety of drag and drop functions.

Drag and drop (Drag and drop) are part of the HTML5 standard. Compared with the previous implementation of jQUERy-UI library, more convenient (save the calculation of coordinates, etc.).

To make the element dragable, the draggable property must be set to true:

<div id=test draggable=true>test</div>[object Object]
Copy the code

The entire drag event is triggered in the following order: dragStart ->drag -> dragenter -> dragover -> dragLeave -> drop ->dragend

Drag and drop event details

When an element is dragged and dropped, it may pass through many elements before reaching the desired element. For the moment, I call the elements that are dragged and dropped source objects, the elements that are passed through process objects, and the elements that arrive target objects. Different objects generate different drag-and-drop events.

Source object events:

Dragstart: The event is triggered when the source object starts to drag and drop

Drag: Triggered when the dragged object is moved during source object drag

Dragend: Triggered when the source object is finished dragging and dropping.

Procedure object events:

Dragenter: Triggered when the source object enters the procedure object scope and the dragged object enters the procedure object

Dragover: Triggered when the source object is moved within the scope of the procedure object and the dragged object is moved within the procedure object

Dragleave: Triggered when the source object leaves the scope of the procedure object and the dragged object leaves the target object

Target object events:

Drop: The source object is dropped to the target object. The target object fully accepts the drop.

The default behavior of the dragenter and dragover events is to refuse to accept any dragged elements **. Therefore, we must prevent the browser from default behavior **. e.preventDefault();

If the drop receiver box is to receive elements, the received drag elements dragenter and Dragover must prevent the default behavior.

el.ondragover = function(e){
   e.preventDefault();
}
el.ondrop = function(e){
 e.preventDefault();
}
Copy the code

In the VUE project:

@dragstart.native="dragStart(index,$event)"
@dragenter.native.prevent="dragenter(index,$event)"
@dragleave.native.prevent
@dragover.native.prevent
@dragend.native="dragend(index,$event)"
@drop.native.prevent="drop(index,$event)"
Copy the code

This triggers the DROP

The dataTransfer object

A dataTransfer object, the dataTransfer, is provided in all drag-and-drop events and is primarily used to transfer data between source and target objects.

DataTransfer method

setData(format, data)

Set the data to be passed in the drag event, format as the data type, data as the data to store. For example: the event. The dataTransfer. SetData (” text/plain “, “hello world”)

There are four types of data stored:

  • text/plain

  • text/html

  • text/xml

  • text/uri-list

Note: If the data of the given type does not exist, it is added to the end of the drag data store such that the last item in the list of datatransfer.types will be the new type.

getData(format)

The method to read data from the dataTransfer object, parameter for the setData method specified in the data types, such as: event. DataTransfer. GetData (” text/plain “)

clearData()

This method clears the data stored in the dataTransfer object. The parameter is an optional data type. If it is empty, all data is cleared.

setDragImage(element,x,y)

  • This method uses the IMG element to set the drag and drop icon

  • Element represents the image under the mouse when you drag it (usually the image element, or canvas element)

  • X and y indicate the horizontal and vertical offsets relative to the image, respectively, corresponding to the mouse pointer.

DataTransfer properties

The dropEffect and Effectalhoward properties

To specify the allowed a drag-and-drop operation effect, for example: dataTransfer. EffectAllowed = “move”.

  1. Effectalhoward is used to specify the visual effects allowed when elements are dragged and dropped. If the Effectalhoward property is set to None, drag-and-drop elements are not allowed

  2. DropEffect represents the visual effect of a drag and drop operation. If the dropEffect property is set to None, it is not allowed to be dragged and dropped into the target element.

This property should be set in the dragstart event to set the desired drag effect for the drag source. In the Dragenter and Dragover event handlers, this property will be set to any value assigned during the dragstart event, so you can use Effectalhoward to determine which effect is allowed. The values are as follows (dropEffect has none, copy, move, link) :

None, copy, move, link, copyMove, linkMove, all, uninitialized

Chrome by default is to display a green plus sign, Settings: $event. The dataTransfer. EffectAllowed = ‘move’. Restores the default mouse style.

Properties files

Returns a list of files to be dragged. It is a FileList object with the length property, accessible by subscript. This feature can be used to drag files from the user’s desktop to the browser. Usually with FileReader to process files. Such as FileReader. ReadAsDataURL and FileReader. Onload

Drag element sorting implementation

I wrote two articles before, and some readers left comments hoping to see the code, so I wrote down roughly this time

Codepen. IO/lujun – zhou /…

Vue implementation

Codepen. IO/lujun – zhou /…

MagicBox TAB sorting is the same thing.

Resize and position canvas elements

Let’s start with BOM and DOM(6): DOM objects and Event object bit value calculations — offsetX/Top,clentX

If you use mouse event control, it becomes very complicated. This is usually implemented using third-party libraries such as interact. Js and VUe-drag-resize.

This is much easier if you use CSS resize directly and then resize with resizeObserve callback.

This idea has been introduced before, for example in Lazy loading optimization: Whether or not the JavaScript IntersectionObserver API monitors elements.

Here’s the rough implementation code:

Codepen. IO/lujun – zhou /…

We did a datav-like version of the requirement, which is written directly in HTML5 native attributes.

IO /atindo23/ PE…

Mouse zoom element operation

Zoom events, implement more say, the MDN column is written well enough

Developer.mozilla.org/en-US/docs/…

Reference article:

HTML 5 – drag and drop events and dataTransfer object blog.csdn.net/hjc256/arti…

About HTML in the dropEffect and effectAllowed blog.csdn.net/gggg5643/ar…

HTML 5 advanced series: drag and drop API implement drag-and-drop ordering – articles – zhihu Lin Xin zhuanlan.zhihu.com/p/26666141

HTML 5 front-end technology tutorial: H5 drag and drop – articles – zhihu Fang Weijing zhuanlan.zhihu.com/p/47458212

Reprint the home station article “HTML 5 sort the mouse drag and resize implementation scheme analysis and practice”, please indicate the source: www.zhoulujun.cn/html/webfro…