vue-draggable 拖拽学习和使用_岁末Zzz的博客

cdn引入

index.html
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
build文件夹webpack.base.conf.js 
externals: {
	'Sortable': 'Sortable',
	'one': 'vuedraggable',
import draggable from 'vuedraggable'
  <draggable :options="{group:'people',animation:150,ghostClass:'sortable-ghost',chosenClass:'chosenClass',scroll:true,scrollSensitivity:200}"
              v-model="list2"
              @change="change"
              @start="start"
              @end="end"
              :move="move"
              style="display: inline-block; width:190px;height: 200px;background: #eee;overflow: auto">
            <li v-for="(item, index) in list2"
                :class="setclass(item,index)"
                :key="index">
              {{item.name}}
          </draggable>
//evt里面有两个值，一个evt.added 和evt.removed  可以分别知道移动元素的ID和删除元素的ID
    change: function (evt) {
      console.log(evt)
    //start ,end ,add,update, sort, remove 得到的都差不多
    start: function (evt) {
      console.log(evt)
    end: function (evt) {
      console.log(evt)
      evt.item //可以知道拖动的本身
      evt.to    // 可以知道拖动的目标列表
      evt.from  // 可以知道之前的列表
      evt.oldIndex  // 可以知道拖动前的位置
      evt.newIndex  // 可以知道拖动后的位置
    move: function (evt, originalEvent) {
      console.log(evt)
      console.log(originalEvent) //鼠标位置
group: "name",  // or { name: "...", pull: [true, false, clone], put: [true, false, array] } name相同的组可以互相拖动
  sort: true,  // 内部排序列表
  delay: 0, // 以毫秒为单位定义排序何时开始。
  touchStartThreshold: 0, // px,在取消延迟拖动事件之前，点应该移动多少像素?
  disabled: false, // 如果设置为真，则禁用sortable。
  store: null,  // @see Store
  animation: 150,  // ms, 动画速度运动项目排序时，' 0 ' -没有动画。
  handle: ".my-handle",  // 在列表项中拖动句柄选择器。
  filter: ".ignore-elements",  // 不导致拖拽的选择器(字符串或函数)
  preventOnFilter: true, // 调用“event.preventDefault()”时触发“filter”
  draggable: ".item",  // 指定元素中的哪些项应该是可拖动的。
  ghostClass: "sortable-ghost",  // 设置拖动元素的class的占位符的类名。
  chosenClass: "sortable-chosen",  // 设置被选中的元素的class
  dragClass: "sortable-drag",  //拖动元素的class。
  dataIdAttr: 'data-id',
  forceFallback: false,  // 忽略HTML5的DnD行为，并强制退出。（h5里有个属性也是拖动，这里是为了去掉H5拖动对这个的影响）
  fallbackClass: "sortable-fallback",  // 使用forceFallback时克隆的DOM元素的类名。
  fallbackOnBody: false,  // 将克隆的DOM元素添加到文档的主体中。（默认放在被拖动元素的同级）
  fallbackTolerance: 0, // 用像素指定鼠标在被视为拖拽之前应该移动的距离。
  scroll: true, // or HTMLElement
  scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }, // if you have custom scrollbar scrollFn may be used for autoscrolling
scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
  scrollSpeed: 10, // px
slot
 使用footer插槽在vuedraggable组件内添加不可拖动的元素。重要:它应该与可拖动选项一起使用，以标记可拖拽元素。注意，在默认情况下，页脚槽将始终被添加 
<draggable v-model="myArray" :options="{draggable:'.item'}">
    <div v-for="element in myArray" :key="element.id" class="item">
        {{element.name}}
    </div>
    <button slot="footer" @click="addPeople">Add</button>
</draggable>
详情参考：
 Vue.Draggablehttps://github.com/SortableJS/Vue.Draggable
 
Sortablehttps://github.com/RubaXa/Sortable
                    安装npm i -S vuedraggablecdn引入index.html&lt;script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"&gt;&lt;/script&gt;    &lt;script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggabl...
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script src="//cdn.jsdeli...
				经测试，Sortable.js 兼容好和使用方便都是比较不错的，特别手机端使用很棒
Sortable.js是一款轻量级的拖放排序列表的js插件（虽然体积小，但是功能很强大）下载地址：https://github.com/RubaXa/Sor...官方DEMO：http://sortablejs.github.io/Sortable
支持触屏设备和大部分浏览器（IE...
				最近在做关于后台管理的项目，后台模板基础框架使用的是layui前端框架http://www.layui.com/。layui的表格渲染还是蛮好用的但是无法使用jQuery UI里的排序功能。下面是一个完美契合layui表格行拖动的插件，复制粘贴引入到jQuery文件的下方就可以使用
 * Sortable
 * @author    RubaXa   <trash@rub...
				这是大佬的博客  https://blog.csdn.net/zjiang1994/article/details/79809687
里面对vue.draggable的一些方法和属性，进行了详解，非常的详细，比官网的还要详细哦！给大佬点赞！！！
这是vue.draggable的官网 https://www.itxst.com/vue-draggable/jirneq6b.html
如图，想要实现这样的效果，左侧列表有一堆框框，要把左侧的列表拖拽到右侧列表，然后就去了官网
官网列子 未拖拽之前是这样的
录屏软件：screenToGif (将视频转为Gif，我认为简单又好操作)
我深知，文字的感知不如图片，图片的感知不如视频，所以希望在每一次的记录中，都有种收货与喜悦，虽然以前用过这个插件，相当强大的插件，但第一次从0到1，所以记录美好时刻~
1.多列之间想要互相拖动
要有相同的name，如：name:'site'
2.多列直接想要拷贝，不移除