我正在使用 vuedraggable 在 vue 中实现嵌套层组件。我尽量让它靠近 Adobe 的图层面板(例如在 Illustrator 中)。
所需的行为是:在拖动项目时,它保持在它的位置,只有一条黑线表示释放拖动后项目将插入的位置。
黑线可以通过样式化vue draggable的ghost来实现。但是如何防止项目在拖动时从其原始位置移除?
我正在使用 vuedraggable 在 vue 中实现嵌套层组件。我尽量让它靠近 Adobe 的图层面板(例如在 Illustrator 中)。
所需的行为是:在拖动项目时,它保持在它的位置,只有一条黑线表示释放拖动后项目将插入的位置。
黑线可以通过样式化vue draggable的ghost来实现。但是如何防止项目在拖动时从其原始位置移除?
我现在对Death Waltz 的 answer使用类似的方法,但没有直接操作 DOM。
相反,我复制了列表中的项目......
start(event) {
// Make a clone of the choosen item and add it to the
// layers list.
const index = event.oldIndex
const item = this.layers[index]
this.layers.splice(index + 1, 0, {
...item,
// Vue requires unique keys.
id: item.id + '_clone',
// Set a isClone flag to be able to delete the clone
// afterwards.
isClone: true
})
},
...然后删除它
end() {
// Delete the clone from the layers.
this.layers = this.layers.filter(layer => !layer.isClone)
}
这是完整的示例:https ://jsfiddle.net/arnoson/587L0nx9/45/
我仍然不确定这是否是最优雅的解决方案,并希望有一个内置的方法来做到这一点。
所以我最终使用了sl-vue-tree ,它基本上完成了模拟 Adobe Illustrators 图层面板所需的一切。
本质上,在单击时创建项目的副本,然后将所选项目设置为不可见。在鼠标上移时,隐藏副本并使该项目再次可见。
一个例子:
ball.onmousedown = function(event) { // (1) start the process
// (2) prepare to moving: make absolute and on top by z-index
var ball2 = ball; //set the balls current position so it doesn't appear to move
ball.style.position = 'absolute';
ball.style.visibility = "hidden"; //make the moving item invisible
document.body.append(ball);
// ...and put that absolutely positioned ball under the pointer
moveAt(event.pageX, event.pageY);
// centers the ball at (pageX, pageY) coordinates
function moveAt(pageX, pageY) {
ball.style.left = pageX - ball.offsetWidth / 2 + 'px';
ball.style.top = pageY - ball.offsetHeight / 2 + 'px';
}
function onMouseMove(event) {
moveAt(event.pageX, event.pageY);
}
// (3) move the ball on mousemove
document.addEventListener('mousemove', onMouseMove);
// (4) drop the ball, remove unneeded handlers
ball.onmouseup = function() {
ball.style.visibility = "visible"; //makes the moved ball visible again
ball2.style.visibility = "hidden"; //makes the copy invisible
document.removeEventListener('mousemove', onMouseMove);
ball.onmouseup = null;
};
};