- CLICK AND DRAG ON ELEMENTS IN ORDER HOW TO
- CLICK AND DRAG ON ELEMENTS IN ORDER UPDATE
- CLICK AND DRAG ON ELEMENTS IN ORDER CODE
❡ConclusionĪnd that's it! Next time you need to reorder some array by dragging and dropping just pull that code in a directive and use it wherever you like.
CLICK AND DRAG ON ELEMENTS IN ORDER UPDATE
In our chapter example, order="order" will update chapter.order whilst order="meta.order" will update. Note that I use lodash's set function here so we can provide a nested property via dot notation. With those two indexes, we can mirror the DOM changes into our VueJs array.
The idea here is to keep track of the original index of a DOM element when it is being dragged and the final index of that same DOM element when it is being dropped. In the bind method of our directive we add some event listeners to our drake instance. We need to do this logic ourselves by adding some event listeners. Whilst this will magically enable dragging and dropping DOM elements, it won't do anything about our chapters array in VueJS. So far, all we've done is dynamically bind and unbind Dragula to our containers. The getDrake method which retrieves a drake instance based on the reference of the given array.The addDrake method which registers a drake instance based on the reference of the given array.Retrieve the drake instance and kill it.įor the sake of clarity, the above code uses two helper methods. Map the items with the drake instance. An array at index `x` will have its drake instance at index `x` as well. Map drake instances to their data structure globally in order to destroy them later. resources/assets/js/directives/Dragdrop.js Since the container received in the bind function and the one received later in the unbind function have different object references, I instead bind the array of elements from VueJS to the drake instance. Therefore, every time we bind a new dragdrop directive to a container, we add a mapping between that container and the drake instance just so that we can destroy it when we're done with it. Dragging & dropping items from different lists together is out of scope when all you need is reordering a list. However, in most use cases, I only need a new drake instance per drag&drop list. That way, if you give the same identifier to multiple containers, the library knows that they should share the same drake instance. bag="my_chapters" or drake="my_chapters". Existing libraries tackle this problem by asking us to add an additional attribute with some unique key that will identify the drake instance. In order to overcome this problem, we need to introduce some kind of mapping between a drag&drop container and its drake instance. Therefore it only works with one drag&drop list. The problem with this implementation is that the drake global variable is shared with all components that use that directive. This code makes sure that we bind dragula to the container and unbind it when we don't need it anymore. When the directive is unbound from the container. When the directive is first bound to the container. Make the drake instance available globally in order to destroy it later.
We start by creating a Dragdrop.js file with the following code.
CLICK AND DRAG ON ELEMENTS IN ORDER HOW TO
I believe its important to understand how to create such a directive in order to be comfortable reusing it and modifying it in future projects. Let's go through the steps of creating such a directive. You can find a working example in the CodePen below.ĭrag&Drop made easy by Loris Leiva ( CodePen. and we let it know where to find the order property in our items.that dragging and dropping will be updating our chapters array.With that first line, we tell our directive v-dragdrop to: Let's start by writing the directive's usage as we wish it could be and we'll make it happen. What we want is a simple drag&drop directive that reorders the DOM elements but also reorders the chapters array and edits the order properties accordingly. Let's say I have an array of chapters each containing an order property which is used to display them in the order requested by the user.
Therefore, I decided to create a little directive that I can copy/paste into components that need data reordering using drag&drop. VueJS has a few plugins that helps us encapsulate Dragula but they also carry a lot of complexity that most of my projects don't need. As a result it can be pretty cumbersome to implement a very simple drag&drop reordering that keeps track of the new order within your data. Whilst the Dragula library has mastered the art of quick and easy drag&drop, it still has to be complete enough to appeal to a vast majority of projects. When you need a quick drag&drop that reorders your data as well as elements in the DOM.
0 kommentar(er)
