Cursor is off the sorted item of jquery-ui-draggable when its parent is hidden out of screen during sort

Question

Demo

In the demo, the sortable items are in container .area which has a fixed position. When items being sorted and dragged into another container, I want .area to move out of the screen by using transform: translate(0,0).

But the problem is that the sorted item is way off the cursor during sort. I have tried cusorAt but it doesn't seem to be the solution. I guess the item needs a recalculation of its relative position since its parent .area has its position changed. How can I sort the problem? Any help would be appreciated.

$(".j_drag").sortable({
    connectWith: ".connectedSortable",
    items:"img",
    start: function( event, ui ) {
        $('.area').removeClass('open');
    },
    stop: function(){
        $('.area').addClass('open');
    },
    cursorAt: { right: 0 }
})

CSS

.connectedSortable{margin:auto;background:beige;height:150px;width:150px}

img{display:block;}

.area{  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
  width: 35%;
  background: grey;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  -moz-transform: translate(100%, 0);
  -o-transform: translate(100%, 0);
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
  -ms-transform: translate(100%, 0);}

.open{  -moz-transform: translate(0,0);
  -o-transform: translate(0,0);
  -webkit-transform: translate(0,0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);}

HTML

<h3>Items</h3>
   <div class="area open">
       <div class="j_drag"><img src="https://www.gravatar.com/avatar/a610b9cd94825418d77db14b71395bcc?s=48&d=identicon&r=PG&f=1"/>
        <img src="https://www.gravatar.com/avatar/a610b9cd94825418d77db14b71395bcc?s=48&d=identicon&r=PG&f=1"/>
       <img src="https://www.gravatar.com/avatar/a610b9cd94825418d77db14b71395bcc?s=48&d=identicon&r=PG&f=1"/>
        <img src="https://www.gravatar.com/avatar/a610b9cd94825418d77db14b71395bcc?s=48&d=identicon&r=PG&f=1"/>
       </div></div>
<div class='j_drag connectedSortable'></div>

Answer 1

One way to solve this would be to remove the sortable elements from area and place them in body on start event and use refreshPositions so the drag position is correctly calculated. Like this:

 start: function( event, ui ) {
    ui.helper.appendTo('body')
    $('.j_drag').sortable('refreshPositions')
    $('.area').removeClass('open');
 },

The revert will be a little weird, but there's probably a way to make it look a bit better. Already by adding revert option it looks better.

See codepen: http://codepen.io/anon/pen/QbvJEX