光标在 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

解决此问题的一种方法是从 area 中删除 sortable 元素并将它们放在 start 事件的 body 中并使用 refreshPositions因此正确计算了拖动位置。像这样：

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

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

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

光标在 jquery-ui-draggable 的已排序项目之外，当其父项目在排序过程中隐藏在屏幕之外时

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

javascript

jquery

jquery-ui

jquery-ui-draggable

jquery-ui-sortable