Question

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

拖动元素
当它放在画布上时抓住
在画布上做一些事情

我尝试使用divs，这是我的尝试：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'));

我注意到了拖动：开始被触发，就是这样。我做错了什么？

Answer 1

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

里面只能有一个 Draggable 元素;
需要使用 draggable-dropzone - 占用类;
它必须位于容器 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

无法在shopify库中获得可拖动/可放置的工作

1 个答案: