title: jQuery ui sortable inaccurate placeholder placement in nested sortables
body: <p>I've a sortable element inside another sortable element. Both are connected to each other. 
  Following the the sample markup:</p>
  
  <pre><code>&lt;div id='container'&gt;
    &lt;div class='parent'&gt;
      &lt;div class='child'&gt;1&lt;/div&gt;
      &lt;div class='child'&gt;2&lt;/div&gt;
      &lt;div class='child'&gt;3&lt;/div&gt;
      &lt;div class='child'&gt;4&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class='parent'&gt;
      &lt;div class='child'&gt;5&lt;/div&gt;
      &lt;div class='child'&gt;6&lt;/div&gt;
      &lt;div class='child'&gt;7&lt;/div&gt;
      &lt;div class='child'&gt;8&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What i'm trying to do is to drag multiple items between <code>.parent</code>'s and <code>#container</code>.</p>
  
  <p>Following is the JS:</p>
  
  <pre><code>$("#container").on('click', '.child', function () {
    $(this).toggleClass('selected');
  });
  
  $('.parent').sortable({
    appendTo: "#container",
    connectWith: '.parent, #container',
    revert: 0,
    helper: function (e, item) {
      if (!item.hasClass('selected')) {
          item.addClass('selected').siblings().removeClass('selected');
      }
      var elements = $('#container').find('.selected').clone();
      $('#container').find('.selected').not(item).addClass('hidden');
      var helper = $('&lt;div/&gt;', {
          class: 'parent'
      });
      return helper.append(elements);
    },
    start: function (e, ui) {
      var len = ui.helper.children().length;
      var width = ui.item.width() + 2;
      ui.helper.width((len * width));
      ui.placeholder.width((len * width));
    },
    stop: function (e, ui) {
      $('.selected').removeClass('selected');
    }
  });
  
  $('#container').sortable({
    connectWith: '.parent',
    tolerance: "pointer"
  });
  </code></pre>
  
  <p>The following</p>
  
  <h2><a href="http://jsfiddle.net/tilwinjoy/6opxyvkp/4/" rel="noreferrer">JSFiddle</a></h2>
  
  <p>with the whole code (<em>I removed the code for appending items to minimize the code since that is not relevant to the placeholder position</em>) demonstrates the issue i'm facing:</p>
  
  <p>I'm able to drag items from <code>.parent</code> to the  <code>#container</code> as follows:</p>
  
  <ul>
  <li>By dragging the items to the left of <code>#container</code> as shown below:
  <img src="https://i.stack.imgur.com/MKvHQ.jpg" alt="enter image description here"></li>
  <li>By dragging items above <code>#container</code> through the space between <code>.parents</code> (<em>This is a bit tricky but it works when the center is exactly hovered over the space</em>) as shown below:
  <img src="https://i.stack.imgur.com/zqe22.jpg" alt="enter image description here"></li>
  </ul>
  
  <p><strong>But</strong> Once i drag an item outside, the placeholder does not appear to the right side of <code>#container</code> even when i directly hover the item over it.</p>
  
  <p>Expected output:</p>
  
  <p><img src="https://i.stack.imgur.com/2FfZh.jpg" alt="desired outpuy"></p>
  
  <p>Current result:</p>
  
  <p><img src="https://i.stack.imgur.com/9cZb8.jpg" alt="current output"></p>
  
  <p>As shown in the image, the placeholder is inside the <code>.parent</code> even though the item is away from it, inside <code>#container</code>.</p>
  
  <p>From what i tried, the issue is with the following:</p>
  
  <pre><code> $('#container').find('.selected').not(item).addClass('hidden');
  </code></pre>
  
  <p>Where i hide the selected items using <code>display:none</code>, Possibly causing miscalculations with jQuery UI.</p>
  
  <p>So i tried <a href="http://api.jqueryui.com/sortable/#method-refresh" rel="noreferrer">refresh</a> and <a href="http://api.jqueryui.com/sortable/#method-refreshPositions" rel="noreferrer">refreshPositions</a> in the <a href="http://api.jqueryui.com/sortable/#event-start" rel="noreferrer">start</a> event, as in this <a href="http://jsfiddle.net/tilwinjoy/6opxyvkp/1/" rel="noreferrer">JSFiddle</a>, Which is produces the expected output, but it no longer properly displays the placeholder in <code>#container</code> in the other two scenario.</p>
  
  <p>What i want to do is to be able to drag items from <code>.parent</code> to <code>#container</code> by</p>
  
  <ol>
  <li>Dragging items to the left of <code>#container</code></li>
  <li>Dragging items above <code>#container</code> through the space between <code>.parents</code></li>
  <li>Dragging items to the right of <code>#container</code></li>
  </ol>
  
  <p><em>Side note: Most of the <a href="http://api.jqueryui.com/sortable/#options" rel="noreferrer">sortable options</a> are added while trying to fix the issue, and the css dimensions are for demo purpose only, these can be added or removed if necessary.</em></p>
  
  <p><strong>Update:</strong> this seems like a bug, which i reported <a href="http://bugs.jqueryui.com/ticket/10578" rel="noreferrer">here</a>. The jQuery UI team replied that  they  are in the process of rewriting all interactions. So hopefully this will be fixed in the next release.</p>