title: Why shopify draggable event start:drag stop working after first time
body: <p>I am working on Shopify draggable and I am stuck in drag from a specific part of the DOM element.</p>
  <p>What I need to achieve is I have to drag from specific(like <strong>Item 1</strong> below) part of my box like the below example. Don't need to drag from anywhere. Below are an example and a picture.</p>
  <pre><code>// HTML Code
   &lt;div class=cont&gt;
      &lt;div class=&quot;grid&quot;&gt;
        &lt;div class=&quot;block&quot;&gt;
          &lt;div class=&quot;droppable&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;block&quot;&gt;
          &lt;div class=&quot;droppable&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
       &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class=block&gt;
    &lt;center&gt;&lt;h1&gt;Drag Items To Drop Boxes&lt;/h1&gt;&lt;/center&gt;
              &lt;ul id=&quot;myUL&quot;&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;
              &lt;div id=&quot;id3&quot; class=&quot;dragname&quot;&gt;
                  &lt;div class=&quot;handle&quot;&gt;Item 1&lt;/div&gt;
                  &lt;div id=&quot;id3hide&quot; class=&quot;hide2&quot;&gt;&lt;span id=3_Red onclick=return(toggleStripe('3','Red')); 
                  class=3_class stripe='Red' style='background: rgba(0, 0, 0, 0) !important;'&gt;R&lt;/span&gt; |&lt;span id=3_White onclick=return(toggleStripe('3','White')); class=3_class stripe='White' style='background: rgba(255, 0, 0, 0.3) !important;'&gt;W&lt;/span&gt; |&lt;span id=3_Yellow onclick=return(toggleStripe('3','Yellow')); class=3_class stripe='Yellow' style='background: rgba(255, 0, 0, 0.3) !important;'&gt;Y&lt;/span&gt; |&lt;span id=3_Orange onclick=return(toggleStripe('3','Orange')); class=3_class stripe='Orange' style='background: rgba(255, 0, 0, 0.3) !important;'&gt;O&lt;/span&gt; |&lt;span id=3_Green onclick=return(toggleStripe('3','Green')); class=3_class stripe='Green' style='background: rgba(255, 0, 0, 0.3) !important;'&gt;G&lt;/span&gt; |&lt;span id=3_Purple onclick=return(toggleStripe('3','Purple')); class=3_class stripe='Purple' style='background: rgba(255, 0, 0, 0.3) !important;'&gt;P&lt;/span&gt; |&lt;/div&gt;
              &lt;/div&gt;
          &lt;/a&gt;&lt;/li&gt;           &lt;li&gt;&lt;a href=&quot;#&quot;&gt;
              &lt;div id=&quot;id4&quot; class=&quot;dragname&quot;&gt;
                  &lt;div class=&quot;handle&quot;&gt;Item 2&lt;/div&gt;
                  &lt;div id=&quot;id4hide&quot; class=&quot;hide2&quot;&gt;&lt;span id=4_Red onclick=return(toggleStripe('4','Red')); class=4_class stripe='Red' style='background: rgba(0, 0, 0, 0) !important;'&gt;R&lt;/span&gt; |&lt;span id=4_White onclick=return(toggleStripe('4','White')); class=4_class stripe='White' style='background: rgba(255, 0, 0, 0.3) !important;'&gt;W&lt;/span&gt; |&lt;span id=4_Yellow onclick=return(toggleStripe('4','Yellow')); class=4_class stripe='Yellow' style='background: rgba(0, 0, 0, 0) !important;'&gt;Y&lt;/span&gt; |&lt;span id=4_Orange onclick=return(toggleStripe('4','Orange')); class=4_class stripe='Orange' style='background: rgba(0, 0, 0, 0) !important;'&gt;O&lt;/span&gt; |&lt;span id=4_Green onclick=return(toggleStripe('4','Green')); class=4_class stripe='Green' style='background: rgba(0, 0, 0, 0) !important;'&gt;G&lt;/span&gt; |&lt;span id=4_Purple onclick=return(toggleStripe('4','Purple')); class=4_class stripe='Purple' style='background: rgba(255, 0, 0, 0.3) !important;'&gt;P&lt;/span&gt; |&lt;/div&gt;
              &lt;/div&gt;
          &lt;/a&gt;&lt;/li&gt;   
              &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>
  <blockquote>
  <p>Javascript Code Below.</p>
  </blockquote>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
  
          const containers = document.querySelectorAll('.block');
  
          const draggable = new Draggable.Droppable(containers, {
              // containment: &quot;parent&quot;,
              // draggable: '.draggable',
              draggable: '.dragname',
              droppable: '.droppable'
          });
  
          draggable.on('drag:start', (event) =&gt; {
              //console.log(`Picked up ${event.source.textContent.trim() || event.source.id || 'draggable element'}`);
               var currentTarget = event.originalEvent.target.className;
               console.log(&quot;curr = &gt;&quot;,currentTarget);
               if (currentTarget != 'handle') {
                  event.cancel();
               }
              // document.addEventListener(&quot;dragstart&quot;, triggerMouseUpOnESC(event));
          });
  
          const triggerMouseUpOnESC = (evt) =&gt; {
              var ent = evt.originalEvent.target.className;
              if (ent !== 'handle') {
                  evt.cancel();
              }
          };
  &lt;/script&gt;
  </code></pre>
  <p>if you check the <strong>drag:start</strong> function it will show you I am getting class name when we start dragging and compare it to element class. if class matched then the event should not cancel. If class not matched then the event should cancel.</p>
  <p><a href="https://i.stack.imgur.com/Juql5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Juql5.jpg" alt="enter image description here" /></a></p>