1

これが私が参照しているデモです:http:
//jqueryui.com/sortable/#connect-lists

現状では、両方のリストは並べ替え可能であり、あるリストから別のリストに要素をドラッグできます。

要素を#sortable1から#sortable2にドラッグする機能を維持しながら、左側のリスト(#sortable1)を並べ替えできないようにするにはどうすればよいですか(要素を再配置できないようにするため)。(#sortable2はソート可能のままである必要があります)

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 に答える