当父项在排序过程中隐藏在屏幕外时，游标将离开jquery-ui-draggable的排序项。

Question

演示

在演示中，可排序项位于具有固定位置的容器.area中。当项目被排序并拖到另一个容器中时，我希望.area使用transform: translate(0,0)移出屏幕。

但问题是排序期间排序的项远离游标。我尝试过cusorAt，但这似乎不是解决方案。我猜该项目需要重新计算它的相对位置，因为它的父.area已经更改了它的位置。我怎样才能解决这个问题？任何帮助都将不胜感激。

$(".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

解决这一问题的一种方法是从sortable中删除area元素，并将它们放在start事件上的body中，然后使用refreshPositions，以便正确计算拖动位置。如下所示：

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

还原可能会有点奇怪，但可能有办法让它看起来更好一些。通过添加还原选项，它看起来更好了。

参见codepen：http://codepen.io/anon/pen/QbvJEX