vue拖拽三种方法_小冯_vue拖拽

irpas 02-07 1585

如果想拖拽排序的可以用组件：vuedraggable。

组件安装

npm i vuedraggable -S

引入

import draggable from 'vuedraggable'

配置项 group: string or array 分组用的，同一组的不同list可以相互拖动 sort: boolean 定义是否可以拖拽 delay:number 定义鼠标选中列表单元可以开始拖动的延迟时间 touchStartThreshold:number (不清楚) disabled: boolean 定义是否此sortable对象是否可用，为true时sortable对象不能拖放排序等功能 store: animation: umber 单位:ms 动画时间 handle: selector 格式为简单css选择器的字符串，使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动 filter: selector 格式为简单css选择器的字符串，定义哪些列表单元不能进行拖放，可设置为多个选择器，中间用“，”分隔 preventOnFilter: 当拖动filter时是否触发event.preventDefault()默认触发 draggable: selector 格式为简单css选择器的字符串，定义哪些列表单元可以进行拖放 ghostClass: selector 格式为简单css选择器的字符串，当拖动列表单元时会生成一个副本作为影子单元来模拟被拖动单元排序的情况，此配置项就是来给这个影子单元添加一个class，我们可以通过这种方式来给影子元素进行编辑样式 chosenClass: selector 格式为简单css选择器的字符串，目标被选中时添加 dragClass:selector 格式为简单css选择器的字符串，目标拖动过程中添加 forceFallback: boolean 如果设置为true时，将不使用原生的html5的拖放，可以修改一些拖放中元素的样式等 fallbackClass： string 当forceFallback设置为true时，拖放过程中鼠标附着单元的样式 dataIdAttr： data-id scroll：boolean当排序的容器是个可滚动的区域，拖放可以引起区域滚动 scrollFn：function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { … } 用于自定义滚动条的适配 scrollSensitivity: number 就是鼠标靠近边缘多远开始滚动默认30 scrollSpeed: number 滚动速度

函数配置 setData: 设置值时的回调函数 onChoose: 选择单元时的回调函数 onStart: 开始拖动时的回调函数 onEnd: 拖动结束时的回调函数 onAdd: 添加单元时的回调函数 onUpdate: 排序发生变化时的回调函数 onRemove: 单元被移动到另一个列表时的回调函数 onFilter: 尝试选择一个被filter过滤的单元的回调函数 onMove: 移动单元时的回调函数 onClone: clone时的回调函数以上函数对象的属性： to: 移动到的列表的容器 from：来源列表容器 item: 被移动的单元 clone: 副本的单元 oldIndex：移动前的序号 newIndex：移动后的序号

就不写了去看官网或者百度

以下不用组件方法。

方法1：没用过，感觉不错，直接上连接

https://·/carriezhao/p/11457841.html

拖拽事件和属性

标记这个很重要!!! 这个决定了拖拽事件的行为。当点击开始拖拽之后，鼠标点击所在的位置就是标记。

dragstart：当单击下鼠标，并移动之后执行。

drag：在dragstart执行之后，鼠标在移动时连续触发。

dragend：当拖拽行为结束，也就是松开鼠标的时候触发。

dragenter：当正在拖拽的元素的标记进入某个Dom元素时触发，自身首先会触发。被进入的Dom元素会触发这个事件。

dragover：当拖拽的元素的标记在进入的Dom元素上移动时触发，在自身移动时也会触发。

dragleave：当拖拽的元素在离开进入的Dom时触发。

H5拖拽属性

draggable：当需要某个元素可以拖拽时，需设置为true，默认为false。选中的文本、图片、链接默认可以拖拽。

DataTransfer对象：该属性用于保存拖放的数据和交互信息，该组件没有使用到，暂忽略。

常规只需要监听三个事件dragstart、dragenter、dragend。需要知道开始拖拽时的元素是谁，拖拽后去往的元素是哪个，以及最后拖拽的结束。

方法2：

大概需求

1:设置draggable="true"允许其被拖动

<li draggable="true" @dragstart="drag($event)">拖拽内容</li> <li @drop="drop($event,'item')" @dragover="allowDrop($event)">我是放下的位置</li>

2:method里，看注释

// 拖拽 drag(ev, id) { console.log("拖动", id); this.id = id; this.dom = ev.currentTarget.cloneNode(true); console.log(this.dom); }, // 允许放下拖拽 allowDrop(ev) { ev.preventDefault(); }, // 放下事件 drop(ev, item) { console.log("放下", item); console.log(ev); ev.preventDefault(); let treeNode = ev.target; if (treeNode) { treeNode.appendChild(this.dom); } },

总结：拖拽只需要定义好拖拽者允许拖拽draggable，容器允许被放置，同时定于好开始拖拽dragstart的事件以及拖拽结束dragover的事件，最后定义好放置事件drop即可完成。