前端拖拽编辑功能

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文件中这样引用

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', () => {
        
    })
  }
}

组件参数
名称类型默认值说明

image.png

<2>vue 组件排列顺序

安装

npm install awe-dnd --save

main.js

import VueDND from 'awe-dnd'
 
Vue.use(VueDND)

sortable.vue

排序完后的操作挺重要的，因为我们一般排序完要重新提交排序后的数据给后台保存，以便下一次安装我们所需要的顺序显示，这里的list就可以帮我们做到这一点，但是我们需要给数据添加一个uniqueId标志。然后在排序完后或者列表对应的顺序和uniqueId提交给后台，我也不知道我说的你们能理解吗，反正你们也可以打印出来看看。

image.png

<3>

https://blog.csdn.net/u011384023/article/details/79762299

<4>

一个基于 Sortable.js 的vue拖拽插件 支持触屏操作 自动适应 draggable组件的v-model属性实现双向绑定。 如果要多个盒子互相拖拽，需定义options，将其group属性定义为同一个值即可 源码如下：

image.png

一个基于Sortable.js的vue拖拽插件
支持触屏操作
自动适应

image.png

image.png

就是这种感觉

draggable组件的v-model属性实现双向绑定。
如果要多个盒子互相拖拽，需定义options，将其group属性定义为同一个值即可
源码如下：

 













  
{{element}}



{{fruit}}









  
{{element}}



{{girl}}



 

<5>https://blog.csdn.net/qq_40882724/article/details/80798135

:翻看vue文档发现可以注册全局指令，用于DOM元素的底层处理，这个挺靠谱。

Vue.directive( 指令名,{ 钩子函数 } )

image.png

3.思路:很简单:首先记录整个对话框距离文档边界的左边距和上边距（当然你监听右边距也oK的，但是别监听下边距，因为我们一般是设置上边距，饿了么也是如此。正如我们调整高度时，会说往下拉一点，或者往上去一点）。鼠标按下的时候监听mousedown事件，记录鼠标距离对话框边界的距离（左边距LEFT，上边距TOP）.然后监听document的mousemove事件，因为我们不可能确保我们的鼠标一直都在框中拖拽，因为我们速度有慢有快，在mousemove中保证鼠标与对话框的位置跟mousedown时一致。鼠标mouseup时移除mousemove和mouseup的监听，下次对话框打开时再把它的位置还原如初。

image.png

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';

 
}

}

})