光标在 jquery-ui-draggable 的已排序项目之外,当其父项目在排序过程中隐藏在屏幕之外时
Cursor is off the sorted item of jquery-ui-draggable when its parent is hidden out of screen during sort
在演示中,可排序的项目位于具有固定位置的容器 .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>
解决此问题的一种方法是从 area
中删除 sortable
元素并将它们放在 start
事件的 body
中并使用 refreshPositions
因此正确计算了拖动位置。像这样:
start: function( event, ui ) {
ui.helper.appendTo('body')
$('.j_drag').sortable('refreshPositions')
$('.area').removeClass('open');
},
还原会有点奇怪,但可能有办法让它看起来更好一点。已经通过添加还原选项看起来更好了。
在演示中,可排序的项目位于具有固定位置的容器 .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>
解决此问题的一种方法是从 area
中删除 sortable
元素并将它们放在 start
事件的 body
中并使用 refreshPositions
因此正确计算了拖动位置。像这样:
start: function( event, ui ) {
ui.helper.appendTo('body')
$('.j_drag').sortable('refreshPositions')
$('.area').removeClass('open');
},
还原会有点奇怪,但可能有办法让它看起来更好一点。已经通过添加还原选项看起来更好了。