(长文预警) 你还在烦工作中碰到的拖拽问题？一个框架jiejue

Sortablejs 简介

Sortable —是一个JavaScript库，用于在现代浏览器和触摸设备上对拖放列表进行重新排序。无需jQuery。支持Meteor，AngularJS，React，Polymer，Vue，Ember，Knockout和任何CSS库，例如Bootstrap

• sorablejs

• demo 网站

一看这解释感觉就是很棒的感觉

特征

• 支持触摸设备和现代浏览器（包括IE9）

• 可以从一个列表拖动到另一个列表或在同一列表内

• 支持拖动手柄和可选文本（比voidberg的html5sortable更好）

• 智能自动滚动

• 高级交换检测

• 流畅的动画

• 多拖动支持

• 支持CSS转换

• 使用原生HTML5拖放API构建

支持

• Meteor

• Angular2.0+1.*

• React

• ES2015+Mixin

• Knockout

• Polymer

• Vue

• Ember

• 支持任何CSS库，例如Bootstrap

• 简单的API

• 支持插件

• CDN

• 不需要jQuery（但有支持）

• typscript定义在 @types/sortablejs

文章

• Dragging Multiple Items in Sortable (April 26, 2019)

• Swap Thresholds and Direction (December 2, 2018)

• Sortable v1.0 — New capabilities (December 22, 2014)

• Sorting with the help of HTML5 Drag'n'Drop API (December 23, 2013)

安装

npm install sortablejs --save

导入

// Default SortableJS
import Sortable from 'sortablejs';

// Core SortableJS (without default plugins)
import Sortable from 'sortablejs/modular/sortable.core.esm.js';

// Complete SortableJS (with all plugins)
import Sortable from 'sortablejs/modular/sortable.complete.esm.js';

插件导入

// Cherrypick extra plugins
import Sortable, { MultiDrag, Swap } from 'sortablejs';

Sortable.mount(new MultiDrag(), new Swap());


// Cherrypick default plugins
import Sortable, { AutoScroll } from 'sortablejs/modular/sortable.core.esm.js';

Sortable.mount(new AutoScroll());

基本模板以及样式代码

.report-wrap {
  width: 100vw;
  height: 100vh;
  display: flex;
  .report-container {
    width: 70vw;
    height: 100%;
    background-color: aqua;
  }
  .select-container {
    box-sizing: border-box;
    padding: 12px;
    width: 25vw;
    height: 100%;
    h3.key-list-title {
      color: rgb(56, 141, 145);
      margin-bottom: 4px;
    }
    .key-list {
      ul.key {
        background-color: #fff;
        height: 355px;
        overflow: hidden;
        margin-top: 6px;
        display: flex;
        flex-flow: column;
        li {
          padding: 6px;
          cursor: -webkit-grab;
        }
        li:hover {
          background-color: rgb(230, 230, 230);
        }
      }
    }

    .data-view-content {
      margin-top: 20px;
      box-sizing: border-box;
      .view {
        box-sizing: border-box;
        display: flex;
        justify-content: space-around;
        .other {
          height: 150px;
          background-color: #fff;
          overflow-y: auto;
          ul {
            box-sizing: border-box;
            padding: 2px;
            li {
              position: relative;
              box-sizing: border-box;
              padding: 2px;
              border: 1px solid rgb(230, 230, 230);
              background-color: #fff;
              margin-bottom: 2px;
              color: rgb(102, 102, 102);
              font-size: 14px;
            }
            li:last-child {
              margin-bottom: 0;
            }
          }
        }
        .other:last-child {
          margin-bottom: 0;
        }
        .same {
          height: 150px;
          background-color: #fff;
          overflow-y: auto;
          ul {
            box-sizing: border-box;
            padding: 2px;
            li {
              position: relative;
              box-sizing: border-box;
              padding: 2px;
              border: 1px solid rgb(230, 230, 230);
              background-color: #fff;
              margin-bottom: 2px;
              color: rgb(102, 102, 102);
              font-size: 14px;
              &:after {
                content: '';
                position: absolute;
                top: 10px;
                right: 5px;
                width: 0;
                height: 0;
                border-right: 4px solid transparent;
                border-left: 4px solid transparent;
                border-top: 4px solid rgb(102, 102, 102);
              }
            }
            li:last-child {
              margin-bottom: 0;
            }
          }
        }
        .same:last-child {
          margin-right: 0;
        }
        .same-wrap {
          margin-right: 10px;
        }
        .same-wrap:last-child {
          margin-right: 0;
        }
        .select-view-wrap {
          width: calc(50%);
        }
        .row-view-wrap {
          width: calc(50%);
        }
        .what-view-wrap {
          width: calc(50%);
        }
      }
    }
    .update {
      padding: 10px;
    }
  }
  /*css代码*/
  #menu {
    width: 0; /*设置为0 隐藏自定义菜单*/
    height: auto;
    overflow: hidden; /*隐藏溢出的元素*/
    box-shadow: 0 1px 1px #888, 1px 0 1px #ccc;
    position: absolute; /*自定义菜单相对与body元素进行定位*/
    background-color: #fff;
    z-index: 100;
    .menu {
      width: 130px;
      height: 25px;
      line-height: 25px;
      padding: 0 10px;
      cursor: pointer;
    }
    .menu:hover {
      background-color: rgb(230, 230, 230);
    }
    .disabled {
      width: 130px;
      height: 25px;
      line-height: 25px;
      padding: 0 10px;
      color: rgb(187, 187, 187);
      pointer-events: none;
      cursor: default;
    }
  }

  // setting 字段设置
  .setting {
    position: absolute;
    box-sizing: border-box;
    top: 50%;
    left: 50%;
    z-index: 100;
    margin-top: -267px;
    margin-left: -240px;
    width: 480px;
    height: 534px;
    background-color: rgb(240, 240, 240);
    .title {
      background-color: #fff;
      height: 25px;
      line-height: 25px;
      text-indent: 25px;
    }
    .setting-content {
      box-sizing: border-box;
      padding: 7px;
      .origin-name {
        padding: 5px 0 5px 0;
      }
      .setting-name {
        padding: 5px 0 5px 0;
      }
      .setting-select-title {
        padding: 5px 0 5px 0;
        border-bottom: 1px solid rgb(160, 160, 160);
      }
      .select-wrap {
        padding: 30px 0 0 30px;
        .select-content {
          margin-top: 10px;
          width: 150px;
          height: 30px;
          select {
            display: inline-block;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .select-button {
      padding: 10px;
      float: right;
      button {
        outline: none;
        width: 80px;
        height: 30px;
        &.confirm {
          background-color: rgb(229, 241, 251);
          border: 1px solid rgb(0, 120, 215);
        }
        &.cancel {
          margin-left: 10px;
        }
      }
    }
  }
}

参数一一说明

要将元素从一个列表拖到另一个列表中，两个列表必须具有相同的group值。您还可以定义列表是否可以放弃，给予和保留副本（clone）以及接收元素。

• name string -- group name

• pull true|false|["foo", "bar"]|'clone'|function 表示可以从列表中移出

• put true|false|["baz", "qux"]|function 是可以从其他列表中添加元素，还是可以从中添加元素的组名数组

• revertClone：boolean—在移动到另一个列表后，将克隆的元素恢复到初始位置

dragUlKey() {
  const ulKey = document.getElementById('key')
  const self = this
  new Sortable(ulKey, {
    group: { name: 'shared', pull: 'clone', put: false },
    animation: 150,
    sort: false, // To disable sorting: set sort to false,
    // Element dragging ended
    onEnd: function(/**Event*/ evt) {
      // console.log(
      //   "evt.item.innerHTML====>",
      //   evt.item.innerHTML,
      //   "evt.item.dataset.value====>",
      //   evt.item.dataset.value,
      //   "evt.item====>",
      //   evt.item,
      //   "evt.oldIndex====>",
      //   evt.oldIndex,
      //   "evt.item.children[0]====>",
      //   evt.item.children[0],
      //   "evt.item.children[0].children[0]====>",
      //   evt.item.children[0].children[0],
      //   "evt.item.parentNode====>",
      //   evt.item.parentNode,
      //   "evt.to====>",
      //   evt.to,
      //   "evt.target====>",
      //   evt.target,
      //   "evt===>",
      //   evt
      // // );
    },
  })
},

我们在加上 revertClone: true

pull, put 可以为 funtion 这个就扩大了拖拽放置的功能了，显得没那么死板，为什么呢？我们可以根据自己需要来判断自己拖拽的项目需要放置在那个盒子里面，不许放置在那个盒子里面，或者说那个盒子不允许 clone，那个盒子允许 clone

dragSelectView() {
  const ulKey = document.querySelector('.select-view ul.select')
  const self = this
  new Sortable(ulKey, {
    animation: 150,
    group: {
      name: 'shared',
      put: function(to, from, target) {
        for (let i = 0; i < to.el.childNodes.length; i++) {
          if (to.el.childNodes[i].dataset.value === target.dataset.value) {
            return false
          }
        }
        return true
      },
    },
    sort: true,
    removeOnSpill: true, // Enable plugin
    onSpill: function(evt) {
      console.log('evt.to===>', evt.to, evt.from)
      if (evt.to.dataset.id === evt.from.dataset.id) {
        this.options.removeOnSpill = true
      } else {
        this.options.removeOnSpill = false
      }
    },
    onEnd: function(evt) {
      console.log('evt update====>dragSelectView', evt.item)
    },
    onUpdate: function(evt) {},
  })
},

当我们重复拖拽同一个项目的时候，只允许放置一次

sort: true 表示可以排序，sort: false 表示不能排序

delay: number 定义排序开始时间的时间（以毫秒为单位）。不幸的是，由于浏览器的限制，使用本地拖放功能无法在IE或Edge上进行延迟

Sortable.create(list, {
  delay: 400
});

似乎不让我拖拽

delayOnTouchOnly 选项

是否仅在用户使用触摸（例如，在移动设备上）时才应用延迟。在任何其他情况下，都不会延迟。默认为false

swapThreshold 选项

交换区域将占据的目标百分比，介于0和之间1

invertSwap 选项

设置为true，将交换区域设置在目标的侧面，以实现“在项目之间”排序的效果

direction 选项

方向可排序应该排序]。可设置'vertical'，'horizontal'或功能，只要目标拖过将被调用。必须返回'vertical'或'horizontal'

 Sortable.create(el, {
 direction: function(evt, target, dragEl) {
  if (target !== null && target.className.includes('half-column') && dragEl.className.includes('half-column')) {
   return 'horizontal';
  }
  return 'vertical';
 }
});

touchStartThreshold 选项

此选项类似于fallbackTolerance选项。

delay设置此选项后，即使手指不动，某些具有非常灵敏的触摸显示屏的手机（如三星Galaxy S8）也会触发不需要的触摸移动事件，从而导致排序不会触发。

此选项设置取消延迟排序之前必须发生的最小指针移动。

3到5之间的值是好的

disabled 选项

如果设置为，则禁用可排序true

var sortable = Sortable.create(list);

document.getElementById("switcher").onclick = function () {
 var state = sortable.option("disabled"); // get

 sortable.option("disabled", !state); // set
}; 

handle 选项

为了使列表项可拖动，Sortable可禁用用户的文本选择。这并不总是可取的。要允许选择文本，请定义一个拖动处理程序，该处理程序是每个列表元素都可以拖动的区域

Sortable.create(el, {
 handle: ".my-handle"
});

 
:: list item text one
 
:: list item text two

.my-handle {
 cursor: move;
 cursor: -webkit-grabbing;
}

filter 选项

Sortable.create(list, {
 filter: ".js-remove, .js-edit",
 onFilter: function (evt) {
  var item = evt.item,
   ctrl = evt.target;

  if (Sortable.utils.is(ctrl, ".js-remove")) {  // Click on remove button
   item.parentNode.removeChild(item); // remove sortable item
  }
  else if (Sortable.utils.is(ctrl, ".js-edit")) {  // Click on edit link
   // ...
  }
 }
})

ghostClass 选项

放置占位符的类名称（默认sortable-ghost）

.ghost {
  opacity: 0.4;
}

Sortable.create(list, {
  ghostClass: "ghost"
});

当拖拽的时候会出现背景颜色

chosenClass 选项

所选项目的类名称（默认sortable-chosen）

.chosen {
  color: #fff;
  background-color: #c00;
}

Sortable.create(list, {
  delay: 500,
  chosenClass: "chosen"
});

forceFallback 选项

如果设置为true，即使我们使用的是HTML5浏览器，也会使用非HTML5浏览器的后备广告。这使我们可以测试较旧浏览器的行为，甚至在较新的浏览器中，也可以使桌面浏览器，移动浏览器和旧浏览器之间的拖放感觉更加一致。

最重要的是，Fallback始终会生成该DOM元素的副本，并附加fallbackClass在选项中定义的类。此行为控制此“拖动”元素的外观