vue.js - 样式化 Vuedraggle 元素

Question

我正在使用vuedraggable构建看板（类似 Trello），它工作正常，但我坚持按照我想要的方式设计它。

事实上，我想要这种动画（链接）：

所以我希望能够：

• 移动卡片本身，而不是自身的某种影子副本
• 像这样设置放置占位符的样式。

我应该针对哪些类进行修改（使用 css）？在我看来，文档中的内容不是很清楚。

提前致谢 ！

Answer 1

你想做几件事。默认重影图像是浏览器默认执行的操作。我们不能让它变得不透明，所以我们想摆脱它。为此，请监听dragstart事件，并将拖动图像设置为空图像：

event.dataTransfer.setDragImage(new Image(), 0, 0);

现在我们已经解决了这个问题，我们需要制作拖动的图像。为了同时了解物品将被丢弃的位置以及您要丢弃的实际卡片，我认为您最好将正在移动的卡片复制到您可以操作的临时容器中。然后，您找出鼠标的位置并移动临时容器。最后你想移除临时卡，这样你就不会在屏幕上的某个地方得到一张随机卡。

您的模板看起来像这样：

<draggable v-model="items" animation="150">
  <div
    v-for="item in items"
    :key="item"
    class="item"
    @dragstart="dragStartHandler"
    @dragend="dragEndHandler"
    @drag="dragHandler"
  >{{ item }}</div>
</draggable>

<div class="drag-preview" :style="dragStyle" ref="dragPreview"></div>

我们可以使用dragstartanddragend来设置空占位符，并添加和删除重复的卡片

dragStartHandler(e) {
  this.dragPreview = e.target.cloneNode(true);
  this.$refs["dragPreview"].appendChild(this.dragPreview);

  e.dataTransfer.setDragImage(new Image(), 0, 0);
},

dragEndHandler() {
  this.dragPreview.remove();
  this.dragPreview = null;
},

该drag事件是一个扩展的 MouseEvent，它具有屏幕和页面坐标。我们听它来确定鼠标在哪里，然后用它们更新一些变量。

dragHandler(e) {
  this.x = e.pageX;
  this.y = e.pageY;
}

然后，您可以通过简单地附加px到它们来计算您的顶部和左侧坐标

dragStyle() {
  return {
    top: `${this.y}px`,
    left: `${this.x}px`
  };
}

为了设置这一切的样式，当前正在排序的项目sortable-ghost默认具有类。就我而言，我只是给它一个灰色的虚线轮廓，并将字体大小设置为 0 以隐藏文本。

.sortable-ghost {
  border: 1px dashed grey;
  font-size: 0;
  overflow: hidden;
}

drag-preview类是跟随鼠标的。当然，当你不拖动任何东西时，里面什么都没有。您的示例显示了一张稍微倾斜的卡片，因此我们将卡片平移 50% 到顶部和左侧，因此它位于鼠标的中心。然后我们将它稍微旋转 7 度。最后我们将它向下移动 55%，这样它就不会与我们的鼠标相交。

.drag-preview {
  position: absolute;
  transform: translateX(-50%) translateY(-50%) rotate(7deg) translateY(55%);
}