想给公司做个网站怎么做,做最好的整站模板下载网站,专业模板网站制作多少钱,网站demo制作工具本文实例讲述了JS拖拽排序插件Sortable.js用法。分享给大家供大家参考#xff0c;具体如下#xff1a;最近由于项目功能设计的原因#xff0c;需要对table中的行实现拖拽排序功能#xff0c;找来找去发现Sortable.js能很好的满足这个需求#xff0c;而且它还是开源的…本文实例讲述了JS拖拽排序插件Sortable.js用法。分享给大家供大家参考具体如下最近由于项目功能设计的原因需要对table中的行实现拖拽排序功能找来找去发现Sortable.js能很好的满足这个需求而且它还是开源的于是乎就开始学习使用Sortable.js再然后就有了这篇文章。特点轻量级但功能强大移动列表项时有动画支持触屏设备和大多数浏览器(IE9及以下除外)支持单个列表容器内部拖拽排序也支持两个列表容器互相拖拽排序支持拖放操作和可选择的文本非常友善的滚动效果基于原生HTML5中的拖放API支持多种框架(Angular、Vue、React等)支持所有的CSS框架如Bootstrap简单的API方便调用CDN不依赖于jQuery运行效果如下图所示单个列表容器内部拖拽排序$(document).ready(function () {var ul document.getElementById(infos);var sortable new Sortable(ul, {handle: input,li,//设置li、input支持拖拽animation: 150,//设置动画时长// Element dragging startedonStart: function (/**Event*/evt) {evt.oldIndex; // element index within parent此处指的是li的索引值},// Element dragging endedonEnd: function (/**Event*/evt) {var lis $(#infos li);//拖拽完毕后重新设置序号使其连续for (var i 0; i lis.length; i) {var no $(lis[i]).find(input:eq(0));no.val(i 1);}}});});li{cursor:pointer;padding-bottom:5px;list-style:none;}--请选择--objectiveproposition--请选择--eliminatealige--请选择--optimizedeploy两个列表容器相互拖拽排序$(document).ready(function () {var infosOne document.getElementById(infosOne);var sortableOne new Sortable(infosOne, {group: guo,//若需要在两个列表容器间拖拽排序那group的值必须相同handle: input,li,//设置li、input支持拖拽animation: 150,//设置动画时长// Element dragging startedonStart: function (/**Event*/evt) {evt.oldIndex; // element index within parent此处指的是li的索引值},// Element dragging endedonEnd: function (/**Event*/evt) {var lis $(#infosOne li);for (var i 0; i lis.length; i) {var no $(lis[i]).find(input:eq(0));no.val(i 1);}lis $(#infosTwo li);for (var i 0; i lis.length; i) {var no $(lis[i]).find(input:eq(0));no.val(i 1);}}});var infosTwo document.getElementById(infosTwo);var sortableTwo new Sortable(infosTwo, {group:guo,//若需要在两个列表容器间拖拽排序那group的值必须相同handle: input,li,//设置li、input支持拖拽animation: 150,//设置动画时长// Element dragging startedonStart: function (/**Event*/evt) {evt.oldIndex; // element index within parent此处指的是li的索引值},// Element dragging endedonEnd: function (/**Event*/evt) {var lis $(#infosOne li);for (var i 0; i lis.length; i) {var no $(lis[i]).find(input:eq(0));no.val(i 1);}lis $(#infosTwo li);for (var i 0; i lis.length; i) {var no $(lis[i]).find(input:eq(0));no.val(i 1);}}});});--请选择--objectiveproposition--请选择--eliminatealige--请选择--optimizedeploy--请选择--目标任务论题议题--请选择--消除排除机敏的敏捷的--请选择--优化使最优化发布部署常见配置项及事件var sortable new Sortable(el, {group: name, // or { name: ..., pull: [true, false, clone], put: [true, false, array] }sort: true, // sorting inside listdelay: 0, // time in milliseconds to define when the sorting should starttouchStartThreshold: 0, // px, how many pixels the point should move before cancelling a delayed drag eventdisabled: false, // Disables the sortable if set to true.store: null, // see Storeanimation: 150, // ms, animation speed moving items when sorting, 0 — without animationhandle: .my-handle, // Drag handle selector within list itemsfilter: .ignore-elements, // Selectors that do not lead to dragging (String or Function)preventOnFilter: true, // Call event.preventDefault() when triggered filterdraggable: .item, // Specifies which items inside the element should be draggableghostClass: sortable-ghost, // Class name for the drop placeholderchosenClass: sortable-chosen, // Class name for the chosen itemdragClass: sortable-drag, // Class name for the dragging itemdataIdAttr: data-id,forceFallback: false, // ignore the HTML5 DnD behaviour and force the fallback to kick infallbackClass: sortable-fallback, // Class name for the cloned DOM Element when using forceFallbackfallbackOnBody: false, // Appends the cloned DOM Element into the Documents BodyfallbackTolerance: 0, // Specify in pixels how far the mouse should move before its considered as a drag.scroll: true, // or HTMLElementscrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }, // if you have custom scrollbar scrollFn may be used for autoscrollingscrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.scrollSpeed: 10, // pxsetData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) {dataTransfer.setData(Text, dragEl.textContent); // dataTransfer object of HTML5 DragEvent},// Element is chosenonChoose: function (/**Event*/evt) {evt.oldIndex; // element index within parent},// Element dragging startedonStart: function (/**Event*/evt) {evt.oldIndex; // element index within parent},// Element dragging endedonEnd: function (/**Event*/evt) {var itemEl evt.item; // dragged HTMLElementevt.to; // target listevt.from; // previous listevt.oldIndex; // elements old index within old parentevt.newIndex; // elements new index within new parent},// Element is dropped into the list from another listonAdd: function (/**Event*/evt) {// same properties as onEnd},// Changed sorting within listonUpdate: function (/**Event*/evt) {// same properties as onEnd},// Called by any change to the list (add / update / remove)onSort: function (/**Event*/evt) {// same properties as onEnd},// Element is removed from the list into another listonRemove: function (/**Event*/evt) {// same properties as onEnd},// Attempt to drag a filtered elementonFilter: function (/**Event*/evt) {var itemEl evt.item; // HTMLElement receiving the mousedown|tapstart event.},// Event when you move an item in the list or between listsonMove: function (/**Event*/evt, /**Event*/originalEvent) {// Example: http://jsbin.com/tuyafe/1/edit?js,outputevt.dragged; // dragged HTMLElementevt.draggedRect; // TextRectangle {left, top, right и bottom}evt.related; // HTMLElement on which have guidedevt.relatedRect; // TextRectangleoriginalEvent.clientY; // mouse position// return false; — for cancel},// Called when creating a clone of elementonClone: function (/**Event*/evt) {var origEl evt.item;var cloneEl evt.clone;}});属性groupstring or arraysortboolean 定义是否列表单元是否可以在列表容器内进行拖拽排序delaynumber 定义鼠标选中列表单元可以开始拖动的延迟时间disabledboolean 定义是否此sortable对象是否可用为true时sortable对象不能拖放排序等功能为false时为可以进行排序相当于一个开关animationnumber 单位ms定义排序动画的时间handleselector 格式为简单css选择器的字符串使列表单元中符合选择器的元素成为拖动的手柄只有按住拖动手柄才能使列表单元进行拖动filterselector 格式为简单css选择器的字符串定义哪些列表单元不能进行拖放可设置为多个选择器中间用“”分隔draggableselector 格式为简单css选择器的字符串定义哪些列表单元可以进行拖放ghostClassselector 格式为简单css选择器的字符串当拖动列表单元时会生成一个副本作为影子单元来模拟被拖动单元排序的情况此配置项就是来给这个影子单元添加一个class我们可以通过这种方式来给影子元素进行编辑样式chosenClassselector 格式为简单css选择器的字符串当选中列表单元时会给该单元增加一个classforceFallbackboolean 如果设置为true时将不使用原生的html5的拖放可以修改一些拖放中元素的样式等fallbackClassstring 当forceFallback设置为true时拖放过程中鼠标附着单元的样式scrollboolean 默认为true当排序的容器是个可滚动的区域拖放可以引起区域滚动事件onChoosefunction 列表单元被选中的回调函数onStartfunction 列表单元拖动开始的回调函数onEndfunction 列表单元拖放结束后的回调函数onAddfunction 列表单元添加到本列表容器的回调函数onUpdatefunction 列表单元在列表容器中的排序发生变化后的回调函数onRemovefunction 列表元素移到另一个列表容器的回调函数onFilterfunction 试图选中一个被filter过滤的列表单元的回调函数onMovefunction 当移动列表单元在一个列表容器中或者多个列表容器中的回调函数onClonefunction 当创建一个列表单元副本的时候的回调函数事件对象事件对象在各个函数中略有不同可通过输出对象查看对象的属性下面简单列举几个toHTMLElement--移动到列表容器fromHTMLElement--来源的列表容器itemHTMLElement--被移动的列表单元cloneHTMLElement--副本的列表单元oldIndexnumber/undefined--在列表容器中的原序号newIndexnumber/undefined--在列表容器中的新序号方法option(name[,value])获得或者设置项参数使用方法类似于jQuery用法没有第二个参数为获得option中第一个参数所对应的值有第二个参数时将重新赋给第一个参数所对应的值closest返回满足selector条件的元素集合中的第一个项toArray()序列化可排序的列表单元的data-id(可通过配置项中dataIdAttr修改)放入一个数组并返回这个数组中sort()通过自定义列表单元的data-id的数组对列表单元进行排序save()destroy()PS这里再为大家推荐一款关于排序的演示工具供大家参考希望本文所述对大家JavaScript程序设计有所帮助。
