In projects, we often encounter some drag-and-drop requirements. There is an open source SortableJS plugin on github, which supports Vue, React, Angular and other frameworks. The implementation effect is very good, and it can basically meet most of the needs. Let’s make a simple demo record for the first use in jquery.
- Introduce the file Sortable.min.js
- Specify the id of the package container
- Start creating and using according to the api
<html> <head> <meta charset="utf-8" /> <title>Sortable. No jQuery.title> <link href="st/app.css" rel="stylesheet" type=< span class="hljs-string">"text/css" /> < /head> <body> <div class="container" style="height: 520px"> <div data-force="30" class="layer block" style="left: 14.5%; top: 0; width: 37%"> <div class="layer title">List A< span class="hljs-tag">div> <ul id="foo" class="block__list block__list_words"> <li>1aaaбегемот test li> <li>2кормli> <li>3антонli> <li>4салоli> <li>5железостальli> <li>6валикli> << span class="hljs-name">li>7кроватьli> <li>8крабli> ul> div> div> <script src="Sortable.min.js">script> <script> Sortable.create(document.getElementById('foo'), {animation: 150, store: {//Cached to localStorage get: function(sortable) {var order = localStorage.getItem(sortable.options.group); return order? order. split('|'): []; }, set: function(sortable) {var order = sortable.toArray(); localStorage.setItem(sortable.options.group, order. join('|'));} }, onAdd: function(evt) {console.log('onAdd.foo:', [evt.item , evt.from]); }, onUpdate: function(evt) {console.log('onUpdate.foo:', [evt.item, evt.from]); }, onRemove: function(evt) {console.log('onRemove.foo:', [evt.item, evt.from]); }, onStart: function(evt) {console. log('onStart.foo:', [evt.item, evt.from]); }, onSort: function(evt) {console.log('onStart.foo:', [evt.item, evt.from]); }, onEnd: function(evt) {console.log('onEnd.foo:', [evt.item, evt.from]);} }); script> body> html >< /span>< /span> span> span> span> span> span>
Official document address: https://github.com/SortableJS/Sortable
demo demo address: http://sortablejs.github.io/Sortable/
.