1

Here is the demo I am referring to:
http://jqueryui.com/sortable/#connect-lists

As is, both lists are sortable, and you can drag elements from one list to another.

How do I make the list on the left (#sortable1) not sortable (such that you can't rearrange the elements) while retaining the ability to drag elements from #sortable1 to #sortable2? (#sortable2 must remain sortable)

4

2 回答 2

1

自己修好了。

HTML：

<ul class="left">
    <li class="item">Drag Me</li>
    <li class="item">Over</li>
    <li class="item">There --></li>
</ul>

<ul class="right">
    <li class="built">1</li>
    <li class="built">2</li>
    <li class="built">3</li>
</ul>

CSS：

ul {
    width: auto;
    height: 500px;
    padding: 0;
    margin: 0 100px 0 0;
    list-style-type: none;
    float: left;
    background-color: blue;
}



.left li {
    width: 100px;
    height: 100px;
    background-color: red;
    border: 1px solid;
}

.right li {
    width: 100px;
    height: 100px;
    background-color: yellow;
    border: 1px solid;
}

JAVASCRIPT：

$(function() {

    $( ".item" ).draggable({
        helper: "clone",
        revert: "invalid",
        stack: ".item"
    });

    $( ".right" ).droppable({
        accept: ".item",
        drop: function(event, ui) {
            buildItem( ui.draggable );
        }
    }).sortable().disableSelection();

    function buildItem( $item ) {
        $item.clone().toggleClass( "item" ).appendTo( ".right" );
    }

});

这是一个演示： http:
//jsfiddle.net/8mBSK/
如果您有任何问题，请告诉我。

于 2013-03-04T16:39:39.163 回答
0

尝试这样的事情：

HTML：

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

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>

JAVASCRIPT：

$(function() {
    $( "#sortable1" ).sortable({
        cancel: ".ui-state-default",
        connectWith: ".connectedSortable"
    }).disableSelection();

    $( "#sortable2" ).sortable({
        connectWith: ".connectedSortable"
    }).disableSelection();
});

演示：http: //jsfiddle.net/dirtyd77/5e7X7/5/

于 2013-03-01T22:56:41.597 回答