时间戳

首页 > 解决方案 > 为什么shopify可拖动事件开始：第一次后拖动停止工作

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

问题描述

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

我需要实现的是我必须从我的盒子的特定（如下面的第 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, 0, 0) !important;'>R</span> |<span id=3_White onclick=return(toggleStripe('3','White')); class=3_class stripe='White' style='background: rgba(255, 0, 0, 0.3) !important;'>W</span> |<span id=3_Yellow onclick=return(toggleStripe('3','Yellow')); class=3_class stripe='Yellow' style='background: rgba(255, 0, 0, 0.3) !important;'>Y</span> |<span id=3_Orange onclick=return(toggleStripe('3','Orange')); class=3_class stripe='Orange' style='background: rgba(255, 0, 0, 0.3) !important;'>O</span> |<span id=3_Green onclick=return(toggleStripe('3','Green')); class=3_class stripe='Green' style='background: rgba(255, 0, 0, 0.3) !important;'>G</span> |<span id=3_Purple onclick=return(toggleStripe('3','Purple')); class=3_class stripe='Purple' style='background: rgba(255, 0, 0, 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, 0, 0) !important;'>R</span> |<span id=4_White onclick=return(toggleStripe('4','White')); class=4_class stripe='White' style='background: rgba(255, 0, 0, 0.3) !important;'>W</span> |<span id=4_Yellow onclick=return(toggleStripe('4','Yellow')); class=4_class stripe='Yellow' style='background: rgba(0, 0, 0, 0) !important;'>Y</span> |<span id=4_Orange onclick=return(toggleStripe('4','Orange')); class=4_class stripe='Orange' style='background: rgba(0, 0, 0, 0) !important;'>O</span> |<span id=4_Green onclick=return(toggleStripe('4','Green')); class=4_class stripe='Green' style='background: rgba(0, 0, 0, 0) !important;'>G</span> |<span id=4_Purple onclick=return(toggleStripe('4','Purple')); class=4_class stripe='Purple' style='background: rgba(255, 0, 0, 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函数，当我们开始拖动并将其与元素类进行比较时，它将显示我正在获取类名。如果类匹配，则事件不应取消。如果类不匹配，则事件应取消。

在此处输入图像描述

标签： javascriptdrag-and-drophtml5-canvasshopifydraggable

解决方案

你可以试试这个片段，将“Item 1”或“Item 2”拖到droppables。您似乎忘记添加该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, 0, 0) !important"
            >R</span
          >
          |<span
            id="3_White"
            onclick
            class="3_class"
            stripe="White"
            style="background: rgba(255, 0, 0, 0.3) !important"
            >W</span
          >
          |<span
            id="3_Yellow"
            onclick
            class="3_class"
            stripe="Yellow"
            style="background: rgba(255, 0, 0, 0.3) !important"
            >Y</span
          >
          |<span
            id="3_Orange"
            onclick
            class="3_class"
            stripe="Orange"
            style="background: rgba(255, 0, 0, 0.3) !important"
            >O</span
          >
          |<span
            id="3_Green"
            onclick
            class="3_class"
            stripe="Green"
            style="background: rgba(255, 0, 0, 0.3) !important"
            >G</span
          >
          |<span
            id="3_Purple"
            onclick
            class="3_class"
            stripe="Purple"
            style="background: rgba(255, 0, 0, 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, 0, 0) !important"
            >R</span
          >
          |<span
            id="4_White"
            onclick
            class="4_class"
            stripe="White"
            style="background: rgba(255, 0, 0, 0.3) !important"
            >W</span
          >
          |<span
            id="4_Yellow"
            onclick
            class="4_class"
            stripe="Yellow"
            style="background: rgba(0, 0, 0, 0) !important"
            >Y</span
          >
          |<span
            id="4_Orange"
            onclick
            class="4_class"
            stripe="Orange"
            style="background: rgba(0, 0, 0, 0) !important"
            >O</span
          >
          |<span
            id="4_Green"
            onclick
            class="4_class"
            stripe="Green"
            style="background: rgba(0, 0, 0, 0) !important"
            >G</span
          >
          |<span
            id="4_Purple"
            onclick
            class="4_class"
            stripe="Purple"
            style="background: rgba(255, 0, 0, 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>

推荐阅读