为什么Shopify可拖动事件开始：第一次拖动后停止工作

问题描述

我正在研究Shopify的可拖动性，并且被困在DOM元素特定部分的拖动中。

我需要实现的是，我必须从框的特定部分（例如下面的 Item 1 ）（例如下面的示例）中拖动。无需从任何地方拖动。下面是一个示例和图片。

// HTML Code
 <div class=cont>
    <div class="grid">
      <div class="block">
        <div class="droppable"></div>
      </div>
      <div class="block">
        <div class="droppable"></div>
      </div>
     </div>
  </div>
</div>

<div class=block>
  <center><h1>Drag Items To Drop Boxes</h1></center>
            <ul id="myUL">
                    <li><a href="#">
            <div id="id3" class="dragname">
                <div class="handle">Item 1</div>
                <div id="id3hide" class="hide2"><span id=3_Red onclick=return(toggleStripe('3','Red')); 
                class=3_class stripe='Red' style='background: rgba(0,0) !important;'>R</span> |<span id=3_White onclick=return(toggleStripe('3','White')); class=3_class stripe='White' style='background: rgba(255,0.3) !important;'>W</span> |<span id=3_Yellow onclick=return(toggleStripe('3','Yellow')); class=3_class stripe='Yellow' style='background: rgba(255,0.3) !important;'>Y</span> |<span id=3_Orange onclick=return(toggleStripe('3','Orange')); class=3_class stripe='Orange' style='background: rgba(255,0.3) !important;'>O</span> |<span id=3_Green onclick=return(toggleStripe('3','Green')); class=3_class stripe='Green' style='background: rgba(255,0.3) !important;'>G</span> |<span id=3_Purple onclick=return(toggleStripe('3','Purple')); class=3_class stripe='Purple' style='background: rgba(255,0.3) !important;'>P</span> |</div>
            </div>
        </a></li>           <li><a href="#">
            <div id="id4" class="dragname">
                <div class="handle">Item 2</div>
                <div id="id4hide" class="hide2"><span id=4_Red onclick=return(toggleStripe('4','Red')); class=4_class stripe='Red' style='background: rgba(0,0) !important;'>R</span> |<span id=4_White onclick=return(toggleStripe('4','White')); class=4_class stripe='White' style='background: rgba(255,0.3) !important;'>W</span> |<span id=4_Yellow onclick=return(toggleStripe('4','Yellow')); class=4_class stripe='Yellow' style='background: rgba(0,0) !important;'>Y</span> |<span id=4_Orange onclick=return(toggleStripe('4','Orange')); class=4_class stripe='Orange' style='background: rgba(0,0) !important;'>O</span> |<span id=4_Green onclick=return(toggleStripe('4','Green')); class=4_class stripe='Green' style='background: rgba(0,0) !important;'>G</span> |<span id=4_Purple onclick=return(toggleStripe('4','Purple')); class=4_class stripe='Purple' style='background: rgba(255,0.3) !important;'>P</span> |</div>
            </div>
        </a></li>   
            </ul>
        </div>

下面的JavaScript代码。

<script type="text/javascript">

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

        const draggable = new Draggable.Droppable(containers,{
            // containment: "parent",// draggable: '.draggable',draggable: '.dragname',droppable: '.droppable'
        });

        draggable.on('drag:start',(event) => {
            //console.log(`Picked up ${event.source.textContent.trim() || event.source.id || 'draggable element'}`);
             var currentTarget = event.originalEvent.target.className;
             console.log("curr = >",currentTarget);
             if (currentTarget != 'handle') {
                event.cancel();
             }
            // document.addEventListener("dragstart",triggerMouseUpOnESC(event));
        });

        const triggerMouseUpOnESC = (evt) => {
            var ent = evt.originalEvent.target.className;
            if (ent !== 'handle') {
                evt.cancel();
            }
        };
</script>

如果您选中 drag：start 函数，当我们开始拖动并将其与元素类进行比较时，它将显示您正在获取类名。如果类匹配，则该事件不应取消。如果课程不匹配，则该事件应取消。

解决方法

您可以尝试使用此代码段，将“项目 1”或“项目 2”拖到可放置对象中。您似乎忘记添加 dropzone 选项。顺便说一句，handle 选项将帮助您更轻松地设置句柄。

  const containers = document.querySelectorAll(".block");

  const draggable = new Draggable.Droppable(containers,{
    draggable: ".dragname",dropzone: ".droppable",handle: ".handle",});

<div class="cont">
  <div class="grid">
    <div class="block">
      <div class="droppable">droppable1</div>
    </div>
    <div class="block">
      <div class="droppable">droppable2</div>
    </div>
  </div>
</div>
<h1>Drag Items To Drop Boxes</h1>
<ul id="myUL" class="block">
  <li class="droppable">
    <a href="#">
      <div id="id3" class="dragname">
        <div class="handle">Item 1</div>
        <div id="id3hide" class="hide2">
          <span
            id="3_Red"
            class="3_class"
            stripe="Red"
            style="background: rgba(0,0) !important"
            >R</span
          >
          |<span
            id="3_White"
            onclick
            class="3_class"
            stripe="White"
            style="background: rgba(255,0.3) !important"
            >W</span
          >
          |<span
            id="3_Yellow"
            onclick
            class="3_class"
            stripe="Yellow"
            style="background: rgba(255,0.3) !important"
            >Y</span
          >
          |<span
            id="3_Orange"
            onclick
            class="3_class"
            stripe="Orange"
            style="background: rgba(255,0.3) !important"
            >O</span
          >
          |<span
            id="3_Green"
            onclick
            class="3_class"
            stripe="Green"
            style="background: rgba(255,0.3) !important"
            >G</span
          >
          |<span
            id="3_Purple"
            onclick
            class="3_class"
            stripe="Purple"
            style="background: rgba(255,0.3) !important"
            >P</span
          >
          |
        </div>
      </div>
    </a>
  </li>
  <li class="droppable">
    <a href="#">
      <div id="id4" class="dragname">
        <div class="handle">Item 2</div>
        <div id="id4hide" class="hide2">
          <span
            id="4_Red"
            class="4_class"
            stripe="Red"
            style="background: rgba(0,0) !important"
            >R</span
          >
          |<span
            id="4_White"
            onclick
            class="4_class"
            stripe="White"
            style="background: rgba(255,0.3) !important"
            >W</span
          >
          |<span
            id="4_Yellow"
            onclick
            class="4_class"
            stripe="Yellow"
            style="background: rgba(0,0) !important"
            >Y</span
          >
          |<span
            id="4_Orange"
            onclick
            class="4_class"
            stripe="Orange"
            style="background: rgba(0,0) !important"
            >O</span
          >
          |<span
            id="4_Green"
            onclick
            class="4_class"
            stripe="Green"
            style="background: rgba(0,0) !important"
            >G</span
          >
          |<span
            id="4_Purple"
            onclick
            class="4_class"
            stripe="Purple"
            style="background: rgba(255,0.3) !important"
            >P</span
          >
          |
        </div>
      </div>
    </a>
  </li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/draggable.bundle.js"></script>