以 100px 为增量水平拖动元素

Question

我很难弄清楚这一点。

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

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

Answer 1

我不会为你编写代码，但我会告诉你从哪里开始，帮助你弄清楚。

---

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

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

接下来在mousedown 上注册一个mousemove 监听器，并在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);
    },
}