title: Target div once user has finished dragging element
body: <p>I have a list:</p>
  
  <pre><code>&lt;ul class="draggable"&gt;
      &lt;li&gt;&lt;span class="drag"&gt;::&lt;/span&gt; item 1&lt;/li&gt;
      &lt;li&gt;&lt;span class="drag"&gt;::&lt;/span&gt; item 2&lt;/li&gt;
      &lt;li&gt;&lt;span class="drag"&gt;::&lt;/span&gt; item 3&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class="done" style="display:none;"&gt;
     Yay!
  &lt;/div&gt;
  </code></pre>
  
  <p>And it is draggable via:</p>
  
  <pre><code>var el = document.querySelectorAll('.draggable');
  for (var i=0;i&lt;el.length; i++) {
      var sortable = Sortable.create(el[i], {
          handle: '.drag',
          animation: 150,
          onUpdate: function (evt/**Event*/){
              var item = evt.item; // the current dragged HTMLElement
  
              // show .done here
  
          }
      });
  }
  </code></pre>
  
  <p>Test <a href="https://jsfiddle.net/h2qnucpg/7/" rel="nofollow">jsFiddle</a>. </p>
  
  <p>My question is, how do I show the <code>.done</code> div once the user has dragged an item?</p>
  
  <p>So in onUpdate, I want to target the <code>.done</code> div. Normally, in jQuery, I would do something like:</p>
  
  <pre><code>jQuery(this).parent().parent().next().show();
  </code></pre>
  
  <p>But this doesn't obviously work here. </p>
  
  <p>What the correct approach here? Note that I <strong>can't</strong> add an id to the <code>.done</code> div. </p>