Uniapp + Sortable implements homepage function application management (can be dragged and sorted, and the order of application positions can be adjusted)

Show results

The final effect is to realize the functions of adding, removing and drag-and-drop sorting the application list on the homepage.

Preparation

Introducing the Sortable plug-in, which is a lightweight drag-and-drop sorting plug-in that can easily implement drag-and-drop sorting of elements in lists, tables, and tree structures.

Here you can use npm to install related dependencies, the command is as follows.

npm install sortablejs --save

For uniapp projects, you only need to introduce the Sortable.min.js file in sortablejs on the page.

Drag and drop implementation

1. Sortable’s drag and drop function is implemented based on HTML5’s Drag and Drop API. This API allows us to drag elements from one position to another and trigger a series of events in the process. In fact, the dragged element is a DOM element.

2. For the uniapp project, since it does not have a document and cannot perform related DOM operations, the official renderjs solution was launched.