jquery sortable保持在容器边界内 [英] jquery sortable keep within container Boundary

问题描述

请看下面的小提琴：

选项：

  $（function（）{
 $（.sortable）.sortable（{
 axis ：'y'，
 containment：parent
}）disableSelection（）; 
}）; 
  

下面是一个使用代码的工作示例： http：// jsfiddle。 net / VzpBq /

从定义包含 //api.jqueryui.com/sortablerel =nofollow noreferrer>可排序的jQueryUI API ：

定义边界框，可以排序的项目被禁止，而
拖动。

Please look at the fiddle below:

http://jsfiddle.net/ujdsu/

HTML, simple unordered list:

<ul class="sortable">
    <li>first item</li>
    <li>second item</li>
    <li>third item</li>
    <li>fourth item</li>
    <li>fifth item</li>
</ul>

jquery:

$(function() {      
   $( ".sortable" ).sortable({
       axis: 'y' 
   }).disableSelection();
});​

CSS:

ul{
    margin:20px 0 0 20px;
    border:1px solid #000;
    width:70%;
    overflow:hidden;
    position:relative;
}
li{
    background:#ccc;
    border-top:1px solid #000;
    padding:10px 5px;
    cursor:move;
}   
li:first-child{
    border-top:0;
}

​

By Default you can drag an item outside its container. I've sort of fixed this by adding "overflow:hidden" to the container, however, you can still drag an item outside the container, you just wont see the part that's outside.. look at the screen shot below:

What I want to achieve is for the user to not be able to move the item any further as soon as it hits the top or bottom edge of the container, so you wouldn't see the result shown in the screenshot above. Ideally "third item" would hit the top edge and wouldn't move any further.

Thanks

解决方案

You need to pass the containment option:

$(function() {      
    $( ".sortable" ).sortable({
       axis: 'y',
       containment: "parent" 
    }).disableSelection();
});​

Here is a working example with the code: http://jsfiddle.net/VzpBq/

Definition of the containment option from the Sortable jQueryUI API:

Defines a bounding box that the sortable items are contrained to while dragging.

这篇关于jquery sortable保持在容器边界内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！