This is the 28th day of my participation in the August Text Challenge.More challenges in August

Drag – dialog drag-and-drop dialog

This is a drag-and-drop dialog, it looks fun, but will there really be a demand for it?

The elDragDialog directive is used

In @/directive/el-drag-dialog/drag.js, a simple look at the js implementation. The dialog is retrieved from the page. When the mouse is pressed down and ready to drag, calculate the distance between the current element and the visible area, and then calculate the moving distance. Finally move the DIALOG’s DOM element.

The way to use it is to add @dragDialog=”handleDrag” to the el-Dialog, and there is a @dragDialog=”handleDrag” callback method.

Drag – select drag-and-drop the select

A select that can be dragged and repositioned, the component is ElDragSelect, and is used the same as a normal select, because it is essentially wrapped in a layer of el-SELECT

Mounted execute setSort method, obtain the large span of the package selection content, then use sorTableJS to implement the drag logic

Dnd-list List drag and drop

Implement a drag list, is based on Vue.Draggable to write, very simple to use, pass two lists in the line

Then I use vueDraggable, pass in two lists, modify the style.

Drag -kanban drag and drop kanban

With the introduction of Kanban component, it can be used directly, also with vuedraggable implementation

The draggable component contains a list, v-bind communicates with the parent component, setData is used to fix a bug in Firefox,… “, and then v-for traverses the list, displaying the data in div, writing some styles,

What makes me confused is how these 3 Kanbans can drag and drop each other, there seems to be no connection, except that the group is the same.

Then I looked for vuedraggable’s documentation… That’s the reason

So far the official provided interesting group also learned, tomorrow learn what to see ~