Jquery-ui sortable usage examples

Jquery-ui sortable usage examples

Recently the company needs to do the task Kanban, need drag effect. Click to view the effect. Since the Web site is a Vue-based technology stack, the first to find a ready-made Vue package of the Drag component: Vue.draggable, the component is based on the sortable package. However, due to the drag-and-drop properties of the native HTML5, the drag-and-drop process is transparent, and the transparency and inclination cannot be modified to achieve the product requirements (product requirements mimic the worktile experience). At the same time I also looked at peers a lot of similar kanban effect, all have inclination and non-transparent, after study, adopt jquery-ui of sortable. So, Sipilailian choice Jquery-ui sortable to operate, in fact, is very reluctant to use: because jquery-based, jquery occupies too much space. However, it is also acceptable because it is PC-side.

Before developing, you can look at the official documents of Jquery-ui's sortable and some examples of documents that people have collated.

• Introducing the jquery library and the Jquery-ui library

  // 引入样式文件<link rel="stylesheet" href="https://static.clouderwork.com/task/static/js/jquery-ui.min.css">// 引入jquery 库<script src="https://static.clouderwork.com/task/static/js/jquery.min.js"></script>// 引入jquery-ui库<script src="https://static.clouderwork.com/task/static/js/jquery-ui.min.js"></script>

• Using instance Code

  Initialize drag initsort () {//Drag to start scrolling distance var scrollingsensitivity = 20//Drag-and-drop scrolling speed let Scrollingspeed = 20//Drag the parent node before dragging    Dragbeforeparentnode = NULL//Initialize drag function $ ('. Task-lists '). Sortable ({//Adaptive placeholder size forcehelpersize:true, Drag mouse shape cursor: '-webkit-grabbing ',//Drag the parent node (this node must be aware that the configuration error will cause the current screen elements can not be automatically scrolling, drag and drop between the two columns will also be a problem) AppendTo: '  . Drag-task ',//Drag Tilt rotate: ' 5deg ',//delay Time (ms), avoid conflicts with click Simultaneous operation delay:150,//drag helper in clone mode: ' Clone ',//drag-and-drop to the border to scroll the spacing, scrollsensitivity:scrollingsensitivity,//apply to drag the blank area of the style placeholder: ' Portlet-place Holder Ui-state-highlight ',//Allow drag-and-drop reserved blank areas forceplaceholdersize:true,//drag-and-drop DOM elements between multiple lists Connectwith: '. task-l  Ists ',//drag End Function stop: (E, UI) + {//The currently dragged element let item = $ (Ui.item)//The subscript of the currently dragged element let Index =      Item.index () Let kid = "//xxxx This can manipulate the data update},//Start the function when dragging starts: (E, UI) + {//The parent node before dragging Dragbeforeparentnode = Ui.item[0].parentnode//make placeholder and source height consistent ui.placeholder.height (ui.helper[0].scrollheight). Width (258) xxxx Here can record some drag before the element property},//Handle two column scrollbar problem Sort:function (event, UI) {var Scrollcontainer = ui.placeholder[0        ].parentnode//cross-column drag case if (dragbeforeparentnode && dragbeforeparentnode.id!== scrollcontainer.id) { Sets the scroll position of the dragged list var Overflowoffset = $ (scrollcontainer). Offset () if ((Overflowoffset.top + scrollcontain  Er.offsetheight)-Event.pagey < scrollingsensitivity) {scrollcontainer.scrolltop = Scrollcontainer.scrolltop + Scrollingspeed} else if (Event.pagey-overflowoffset.top < scrollingsensitivity) {Scrollcontainer. scrolltop = Scrollcontainer.scrolltop-scrollingspeed}}}). Disableselection ()

  = = In the development of the time must read more documents, understand the meaning of its properties will be more effective, postpone the problem. ==
  Here is an example for reference: jquery-ui-sortable instance, source code on GitHub, address

Jquery-ui sortable usage examples