设置Vuedraggle元素的样式

Question

我正在使用vuedraggable来构建一个看板（类似于Trello），它可以正常工作，但是我只能按照自己的方式来设计样式。

事实上，我想拥有这种动画（LINK）：

所以我希望能够：

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

我应该针对哪些类（使用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>

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

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类。就我而言，我只是给它一个灰色的虚线轮廓，然后将font-size设置为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%);
}