Jquery UI draggable bez przewijania sortowalnego kontenera

Question

Jan 09, 2013, 05:40 PM

jquery-ui-sortable jquery jquery-ui jquery-draggable

Jquery UI draggable bez przewijania sortowalnego kontenera

Mam kilka elementów przeciąganych (#draggable li), które przeciągam i upuszczam w sortowalnej (#sortable).

Sortowalność jest zawijana przez dwa divy, a najbardziej zewnętrzna div ma przepełnienie-y: scroll. Mechanizm przeciągania i upuszczania działa dobrze, dopóki lista sortowalna nie zostanie rozwinięta i przewijana.

Kiedy próbuję przeciągnąć i bezpośrednio upuścić element na sortowalny sposób, nie mogę uzyskać sortowalnego paska przewijania do automatycznego przewijania w sposób, w jaki chcę iść (powiedzmy, że chcesz iść w górę, aby upuścić nad pierwszy element lub zejść poniżej spadku ostatni element). Ale kiedy próbuję przeciągać i sortować między sobą elementy, przewijaj pasek przewijania podczas przeciągania.

Czy to błąd, czy też błąd w sposobie działania mojego kodu.

Oto pełny kod:

<body>
    <ul id="draggable" class="connectedSortable">
        <li class="ui-state-default big">Item 1</li>
        <li class="ui-state-default big">Item 2</li>
        <li class="ui-state-default big">Item 3</li>
        <li class="ui-state-default big">Item 4</li>
        <li class="ui-state-default big">Item 5</li>
        <li class="ui-state-default big">Item 6</li>
    </ul>

  <div id="outerDiv">
    <div id="innerDiv">
      <ul id="sortable" class="connectedSortable">
      </ul>
    </div>
  </div>
</body>

// CSS

#sortable, #draggable { 
  list-style-type: none; 
  margin: 0; 
  padding: 0 0 2.5em; 
  margin-right: 10px; 
}
#sortable li, #draggable li { 
  margin: 0 5px 5px 5px; 
  padding: 5px; 
  font-size: 1.2em; 
  width: 120px; 
}
.marker{
    background: none repeat scroll 0 0 #DDDDDD;
    border-bottom: 1px solid #BBBBBB;
    border-top: 1px solid #BBBBBB;
    display: block;
    height: 20px;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    color: #666;
    font-size: 18px;
    font-style: italic;
}

#outerDiv{
    background: none repeat scroll 0 0 #EEEEEE;
    height: 100%;
    right: 0;
    position: absolute;
    overflow-y: scroll; 
    top: 0;
    width: 300px;
}

#innerDiv{
    border: 1px solid #CCCCCC;
    min-height: 400px;
    position:absolute;
}
#sortable{
    width: 200px;
    padding: 10px;
    border : 1px solid black;
    min-height: 230px;
}

#draggable{
    position:absolute;
    top:0;
    left:0;
}
.big{
    height: 80px;
}

// JS

$(function() {
  $( "#sortable" ).sortable({
       placeholder: "marker",
       axis: "y",
  });

  $("#draggable li").draggable({
      helper: "clone",
      cursor: "move",
      revert: "invalid",
      revertDuration: 500,
      connectToSortable: "#sortable"
  });
});

demo na skrzypcachhttp://jsfiddle.net/8KDJK/21/

Każda pomoc byłaby bardzo mile widziana. Dzięki :)