javascript - 无法在 shopify 库中获得可拖放的工作

Question

我无法获得 shopify/draggable为我工作。其实我只需要

1. 拖动一个元素
2. 当它落在 Canvas 上时捕捉
3. 在 Canvas 上做一些事情

我尝试只使用 div，这是我的尝试:https://jsfiddle.net/1v4eL8oz/6/

const containers = document.querySelectorAll('.block')

const droppable = new Draggable.Droppable(containers, {
  draggable: '.draggable',
  droppable: '.droppable'
});

droppable.on('drag:start', () => console.log('drag:start'));
droppable.on('droppable:over', () => console.log('droppable:over'));
droppable.on('droppable:out', () => console.log('droppable:out'));

我注意到 drag:start 被触发了，仅此而已。我做错了什么？

Answer 1

这是图书馆的一大损失，甚至更大 - 他们的文档，但是，当您使用 Droppable 时，您需要将所有 Draggable 元素覆盖到 可转换 容器，就像另一个转换区一样。但是，对于那些包含 Draggable 元素的容器，有一些规则:

1. 内部只能是一个Draggable元素；
2. 需要有draggable-dropzone--occupied类；
3. 它需要位于容器 div 或元素中，例如关于Draggable 或Droppable 的任何内容。

因此，您的 jsfiddle 需要看起来像这样:

const containers = document.querySelectorAll('.block')

const droppable = new Draggable.Droppable(containers, {
  draggable: '.draggable',
  droppable: '.droppable'
});

droppable.on('drag:start', () => console.log('drag:start'));
droppable.on('droppable:over', () => console.log('droppable:over'));
droppable.on('droppable:out', () => console.log('droppable:out'));

.draggable, .droppable.draggable-dropzone--occupied{
  width: 100px; 
  height: 100px; 
}
.droppable{
  width: 300px; 
  height: 300px;
}

<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.5/lib/draggable.bundle.js"></script>

<div class="block">
      <div style="background-color: black" class="droppable draggable-dropzone--occupied">
        <div style=" background-color: red" class="draggable"></div>
      </div>
</div>
    
<div class="block">
      <div style="background-color: #eee" class="droppable"></div>
    </div>

Working example

有人解释了here