La interfaz de usuario de Jquery se puede arrastrar, no desplazar el contenedor clasificable

Question

Jan 09, 2013, 05:40 PM

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

La interfaz de usuario de Jquery se puede arrastrar, no desplazar el contenedor clasificable

Tengo algunos elementos que se pueden arrastrar (#draggable li) que los estoy arrastrando y soltando en un ordenable (#sortable).

El ordenable está envuelto por dos divs y el div más externo tiene overflow-y: scroll. El mecanismo de arrastrar y soltar funciona bien hasta que la lista clasificable se expande y se desplaza.

Cuando trato de arrastrar y soltar directamente un elemento en el ordenable, no puedo hacer que la barra de desplazamiento clasificable se desplace automáticamente de la manera que quiero ir (por ejemplo, quiero subir para colocar sobre el primer elemento o bajar para colocar debajo último elemento). Pero cuando intento arrastrar y ordenar los elementos entre ellos, la barra de desplazamiento se desplaza automáticamente mientras se arrastra.

¿Es un error o hay una falla en la forma en que funciona mi código?

Aquí está el código completo:

<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 en violínhttp://jsfiddle.net/8KDJK/21/

Cualquier ayuda sería muy apreciada. Gracias :)