https://blog.csdn.net/weixin_41646716/article/details/82905765
<1>安装
通过NPM安装
$ npm install awe-dnd --save
插件应用
在main.js中，通过Vue.use导入插件
import VueDND from 'awe-dnd'
Vue.use(VueDND)
在你的vue文件中这样引用
{{color.text}}
vue2.0的使用方式
{{color.text}}
vue1.0的使用方式
{{color.text}}
添加事件
{{color.text}}
export default {
mounted () {
this.$dragging.$on('dragged', ({ value }) => {
console.log(value.item)
console.log(value.list)
console.log(value.otherData)
})
this.$dragging.$on('dragend', () => {
})
}
}
组件参数
名称类型默认值说明
<2>vue 组件排列顺序
安装
npm install awe-dnd --save
main.js
import VueDND from 'awe-dnd'
Vue.use(VueDND)
sortable.vue
排序完后的操作挺重要的，因为我们一般排序完要重新提交排序后的数据给后台保存，以便下一次安装我们所需要的顺序显示，这里的list就可以帮我们做到这一点，但是我们需要给数据添加一个uniqueId标志。然后在排序完后或者列表对应的顺序和uniqueId提交给后台，我也不知道我说的你们能理解吗，反正你们也可以打印出来看看。
<3>
https://blog.csdn.net/u011384023/article/details/79762299
<4>
一个基于 Sortable.js 的vue拖拽插件 支持触屏操作 自动适应 draggable组件的v-model属性实现双向绑定。 如果要多个盒子互相拖拽，需定义options，将其group属性定义为同一个值即可 源码如下：
一个基于Sortable.js的vue拖拽插件
支持触屏操作
自动适应
就是这种感觉
draggable组件的v-model属性实现双向绑定。
如果要多个盒子互相拖拽，需定义options，将其group属性定义为同一个值即可
源码如下：
Document
{{element}}
{{fruit}}
{{element}}
{{girl}}
<5>https://blog.csdn.net/qq_40882724/article/details/80798135
:翻看vue文档发现可以注册全局指令，用于DOM元素的底层处理，这个挺靠谱。
Vue.directive( 指令名,{ 钩子函数 } )
3.思路:很简单:首先记录整个对话框距离文档边界的左边距和上边距（当然你监听右边距也oK的，但是别监听下边距，因为我们一般是设置上边距，饿了么也是如此。正如我们调整高度时，会说往下拉一点，或者往上去一点）。鼠标按下的时候监听mousedown事件，记录鼠标距离对话框边界的距离（左边距LEFT，上边距TOP）.然后监听document的mousemove事件，因为我们不可能确保我们的鼠标一直都在框中拖拽，因为我们速度有慢有快，在mousemove中保证鼠标与对话框的位置跟mousedown时一致。鼠标mouseup时移除mousemove和mouseup的监听，下次对话框打开时再把它的位置还原如初。
5.贴上代码：
import Vue from 'vue'
let LEFT;
let TOP;
//指令的传参形式为
Vue.directive('dialogdrag',{
inserted(el,binding){
let container = el.querySelector(binding.value.container);
let target = el.querySelector(binding.value.target);
let temContainerWidth = getComputedStyle(container).width;
let temHtmlWidth = getComputedStyle(document.firstElementChild).width;
if(temContainerWidth.indexOf('%') != -1){
//百分值
LEFT = (
parseFloat(temHtmlWidth) -
parseFloat(temHtmlWidth) * temContainerWidth.substring(0,temContainerWidth.length-1)/100
)/2;
}else if(temContainerWidth.indexOf('px') != -1){
//像素值
LEFT = (
parseFloat(temHtmlWidth) -
parseFloat(temContainerWidth)
)/2;
}else{
//其他值
throw ('对话框容器宽度只能为像素或百分比！')
}
console.log(temContainerWidth);
console.log(temHtmlWidth);
//
let temMarginTop = getComputedStyle(container).marginTop;
if(temMarginTop && temMarginTop.indexOf('px') != -1){
//不为空并且以像素为单位
TOP = parseFloat(temMarginTop);
}else{
throw ('请设置对话框容器上边距margin-top并以像素为单位！')
}
console.log(LEFT)
//删除对话容器的行内样式（marginleft,margintop,marginbottom,marginrigth）;
delete container.style.marginTop;
delete container.style.marginLeft;
delete container.style.marginRight;
delete container.style.marginBottom;
delete container.style.margin;
//赋值给marginTop;marginLeft;
container.style.marginTop = TOP+'px';
container.style.marginLeft = LEFT+'px';
//事件监听
target.addEventListener('mousedown',function(event){
//获取鼠标距离对话框容器的左上边距
let leftValue = event.clientX - parseFloat(getComputedStyle(container).marginLeft);
let topValue = event.clientY - parseFloat(getComputedStyle(container).marginTop);
document.addEventListener('mousemove',moveFn,true)
document.addEventListener('mouseup',upFn,true)
function moveFn(event){
console.log('还在移动')
target.style.cursor = 'move';
container.style.marginLeft = (event.clientX-leftValue)+'px';
container.style.marginTop = (event.clientY-topValue)+'px';
}
function upFn(event){
target.style.cursor = 'default';
document.removeEventListener('mousemove',moveFn,true);
//document.removeEventListener('mouseup',upFn);
}
})
},
componentUpdated(el,binding){
if(binding.value.dialogVisible){
//打开时还原对话框位置
el.querySelector(binding.value.container).style.marginTop = TOP+'px';
el.querySelector(binding.value.container).style.marginLeft = LEFT+'px';
}
}
})