Question

我很难搞清楚这一点。

我有一堆div s（里面有一些内容），我希望能够水平地拖放它们。但是，我希望以100px的增量移动它们（left位置需要为0,100,200等）。想象一下，在背景中有一个100px宽的单元格表，你只能将元素移动到另一个单元格。除了没有桌子。

我认为jQuery是不可能的（我正在使用Vue）。

Answer 1

我不会为你编写代码，但我会告诉你从哪里开始，帮助你解决问题。

首先，听取元素上的mousedown和mouseup事件：

<div v-on="{ mousedown, mouseup }">Some content</div>

接下来在mousemove上注册一个mousedown听众，并在mouseup上取消注册：

methods: {
    mousemove(e) {
        const moved = e.offsetX - this.startX;
        // The mouse has moved "moved" pixels.
        // Now calculate whatever you want 
    },
    mousedown(e) {
        this.startX = e.offsetX;

        e.currentTarget.addEventListener(this.mousemove);
    },
    mouseup(e) {
        e.currentTarget.removeEventListener(this.mousemove);
    },
}

水平拖动元素增量为100px

1 个答案: