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

This article mainly introduces "how to use vue to achieve page div box drag-and-drop sorting function". In daily operation, I believe many people have doubts about how to use vue to achieve page div box drag-and-drop sorting function. Xiaobian consulted all kinds of information and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the question of "how to use vue to achieve page div box drag-and-sort function". Next, please follow the editor to study!

Vue implements page div box drag-and-drop sorting function Preface: at present, there are many plug-ins and methods to implement drag-and-drop sorting function on the market. This section does not cover much, but only one: the transition-group method of css3

Effect picture:

1. Used in DOM:

{{app.name}}

2. Define data in data

Import {APi} from'@ / api/enterpriseAPi' export default {data () {return {oldData: [], newData: [], customApps: [], dragStartId:' DragEndId:''}

3. Use in the methods method

Dragstart (value) {this.oldData = value this.dragStartId = value.id}, dragenter (value) {this.newData = value this.dragEndId = value.id}, getDragend (listData) Type) {if (this.oldData! = = this.newData) {let oldIndex = listData.indexOf (this.oldData) let newIndex = listData.indexOf (this.newData) let newItems = [... listData] / / DOM node newItems.splice (oldIndex) before deletion 1) / / add a new DOM node newItems.splice (newIndex, 0, this.oldData) at the end of the drag target / / after each drag ends The data processed by the drag and drop is assigned to the original array to update the DOM view. The page displays the drag animation this.customApps = newItems / / Save the data Api (this.dragStartId, this.dragEndId). Then ((res) = > {})} when the API is called after each drag and drop

Drag to complete the animation style:

Sort-move {transition: transform 1s;} at this point, the study on "how to use vue to implement the page div box drag-and-drop sorting function" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.