Draggable: Handle bug

Created on 26 Jun 2020 · 5Comments · Source: Shopify/draggable

I tried use the handle in one item of the list and I get a bug:

<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/css/tachyons.min.css"/>
    <style>
      .draggable-mirror {
          list-style-type: none;
          border-style: none;
          border-width: 0;
      }
      li {
          -webkit-user-select: none !important;
          -moz-user-select: none !important;
          -ms-user-select: none !important;
          user-select: none !important;
      }
      .draggable-source--is-dragging {
          opacity: 0.2;
          -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
          filter: alpha(opacity=20);
      }

      div,ul,li:focus {
          outline: none;
      }
    </style>
  </head>
  <body>
    <ul class="list w-50" id="list1">
      <li><div class="red"><span class="handle-item">+</span>1</div></li>
      <li><div class="green">2</div></li>
      <li><div class="yellow">3</div></li>
      <li><div class="blue">4</div></li>
    </ul>
    <script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/sortable.js"></script>
    <script>
      const list1 = document.getElementById('list1');
      const sortable = new Sortable.default([list1], {
          draggable: 'li',
          handle: '.handle-item',
          mirror: { constrainDimensions: true }
      });
    </script>
</html>

The bug:

draggable-handle-bug

Library version: 1.0.0-beta.10
Browsers: Chromium 78.0.3904.87

bug

Source

noloop

🚀1

All 5 comments

~There is a fix https://github.com/zjffun/draggable/commit/0c67ac1c367efc6c2d9020f3e726dde3c3e0f198 that hasn't do many testing.(wrong solution)~

I think this can be fixed after https://github.com/Shopify/draggable/pull/375 merged.

zjffun on 27 Jun 2020

@zjffun , It seems this fix will break distance option, you can try below options:

      const list1 = document.getElementById('list1');
      const sortable = new Sortable.default([list1], {
          distance: 5,
          draggable: 'li',
          handle: '.handle-item',
          mirror: { constrainDimensions: true }
      });

Because you moved the onDistanceChange listener to startDrag method, so the distance value can't be check, and the startDrag can't be call 😢 .

https://github.com/zjffun/draggable/blob/0c67ac1c367efc6c2d9020f3e726dde3c3e0f198/src/Draggable/Sensors/MouseSensor/MouseSensor.js#L82

As you can see in above code, the actual drag distance value must larger than distance option to allow startDrag method being run. 😢