原生拖拽
<div class="dock flex-row" ref="dock" :class="{collapse: isCollapse}">
<ul class="dock-icons flex-row ali-center" ref="icons">
<li class="dock-icon flex-col" v-for="(item, i) in dock" :key="i" draggable="true"
@dragstart.stop="handleDragStart($event, item)"
@dragover="handleDragOver($event, item)"
@dragenter.prevent="handleDragEnter($event, item)"
@dragend="handleDragEnd($event, item)">
<svg class="icon" aria-hidden="true">
<use :xlink:href="`#icon-${item.icon}`"></use>
</svg>
<span class="icon-name">{{item.name}}</span>
</li>
</ul>
<div class="opera-btn" ref="operat">
可点击拖拽
</div>
</div>
handleDrag () {
this.$nextTick(() => {
let flag = false
let dock = this.$refs.dock;
let opera = this.$refs.operat;
let dockX = 0
let dockY = 0
let mouseX = 0
let mouseY = 0
let moveX = 0
let moveY = 0
opera.onmousedown = e => {
this.startDrag = true
flag = true
dockX = dock.offsetLeft
dockY = dock.offsetTop
mouseX = e.clientX
mouseY = e.clientY
if (this.isCollapse) {
this.isCollapse = false
this.$refs.dock.style.left = "50%"
this.$refs.dock.style.top = "88vh"
}
}
document.onmousemove = e => {
if (this.startDrag) {
this.dragging = true
moveX = e.clientX - mouseX + dockX
moveY = e.clientY - mouseY + dockY
let ww = document.body.clientWidth
let wh = document.body.clientHeight
dock.style.opacity = 1
if (moveX <= dock.clientWidth / 2 && !this.isCollapse) {
moveX = dock.clientWidth / 2
dock.style.opacity = .5
}
if (moveX >= ww - dock.clientWidth / 2) moveX = ww - dock.clientWidth / 2
if (moveY <= 0) moveY = 0
if (moveY >= wh - dock.clientHeight) moveY = wh - dock.clientHeight
dock.style.left = moveX + "px"
dock.style.top = moveY + "px"
}
}
document.addEventListener("mouseup", e => {
if (flag) {
this.startDrag = false
if (this.dragging) {
if ((moveX <= dock.clientWidth / 2) && !this.isCollapse) {
dock.style.opacity = 1
this.isCollapse = true
}
} else {
}
this.dragging = false
flag = false
}
})
})
},
handleDragStart (e, item) {
this.draggingItem = item;
},
handleDragEnd (e) {
this.draggingItem = null;
},
handleDragOver (e) {
e.dataTransfer.dropEffect = "move";
},
handleDragEnter (e, item) {
e.dataTransfer.effectAllowed = "move";
const newItems = [...this.dock];
const src = newItems.indexOf(this.draggingItem);
const dst = newItems.indexOf(item);
newItems.splice(dst, 0, ...newItems.splice(src, 1));
this.dock = newItems;
},
组件或指令
组件或指令
参考“;
http://t.zoukankan.com/xuxiaoxia-p-8405076.html