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

This article mainly explains "what to pay attention to when using sortablejs". The explanation in this article is simple and clear, easy to learn and understand. Please follow the ideas of Xiaobian and study and learn "what to pay attention to when using sortablejs" together.

1. This method is very hard to find ah, looking for a long time, or colleagues remind me, a person's strength is too small, ha ha, this method and attributes means that when a certain item overflows a certain area, it will automatically delete this item, is displayed in the form of plug-ins

2. Note that the put parameter in the group parameter can be a function, indicating that it can be placed.

group: {

name: 'shared',

put: function(to, from, target) {

for (let i = 0; i < to.el.childNodes.length; i++) {

if (to.el.childNodes[i].dataset.value === target.dataset.value) {

return false

}

}

return true

},

},

3. sortablejs drag new Sortble(el, {}), can only be in the original area, beyond this area seems to onMove event will be invalid, can not get evt.originalEvent.clientX, evt.originalEvent.clientY

4. Maybe when dragging items, the pull="clone" configuration option we set will cause our original drag item events to be affected, resulting in click events will be invalid. Such problems can only be solved by layout, separating the ones that need to be clicked for multi-column layout.

5. Before the demo is to use direct drag and drop method, is to directly put DOM into a certain area, now due to changes in the design draft, we can not use the example in the previous demo, can only rethink the use of other ways, after our discussion, and I in the implementation, found that we must define the data in the data-attribute inside, using false drag method, and then get the data-attribute data, save into the array, and then render

6. In the demo before, when dragging items to overflow a certain area, the removeSpill attribute was enabled. I found that there were also many problems. This attribute must also be combined with the onSpill method, but it was too inflexible. Once removeSpill was disabled, the onSpill method could not be used. So after my thinking, I could only use the area that was separated from the original, left,top,right,bottom.

7. If you want el-checkbox component in element-ui to trigger native event, you need to add.native to change event, otherwise you cannot get native event object.

Thank you for reading, the above is the content of "what to pay attention to when using sortablejs". After studying this article, I believe everyone has a deeper understanding of what to pay attention to when using sortablejs. The specific use situation still needs to be verified by practice. Here is, Xiaobian will push more articles related to knowledge points for everyone, welcome to pay attention!

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.