How to define dropzone for sortable?

[iliasmertzanos]

Hi guys

is there any direct way to restrict where a sortable element can be dropped?

I would like to restrict it just in the area where it belongs, which is a bit complex when there is a nested structure .

An example of yours in your page shows something similar but just for the droppable extension.

[zjffun]

Multiple Sortable instances or remove the class for draggable can be used to limit the drag area. There is a simple example:

    <h1>group 1</h1>
    <ul class="content1">
      <li class="sortable-element1">sortable element</li>
      <li class="sortable-element1">can be droped</li>
      <li>can't be dropped</li>
      <li>can't be dropped</li>
      <li>can't be dropped</li>
      <li class="sortable-element1">can be droped</li>
      <li>can't be dropped</li>
      <li>can't be dropped</li>
      <li>
        <h1>group 2</h1>
        <ul class="content2">
          <li class="sortable-element2">sortable element</li>
          <li class="sortable-element2">can be droped</li>
          <li>can't be dropped</li>
          <li>can't be dropped</li>
          <li>can't be dropped</li>
          <li class="sortable-element2">can be droped</li>
          <li>can't be dropped</li>
          <li>can't be dropped</li>
        </ul>
      </li>
    </ul>

    <script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/draggable.bundle.js"></script>
    <script>
      const sortable1 = new Draggable.Sortable(
        document.querySelectorAll(".content1"),
        {
          draggable: ".sortable-element1",
        }
      );

      const sortable2 = new Draggable.Sortable(
        document.querySelectorAll(".content2"),
        {
          draggable: ".sortable-element2",
        }
      );
    </script>