これが私が参照しているデモです:http:
//jqueryui.com/sortable/#connect-lists
現状では、両方のリストは並べ替え可能であり、あるリストから別のリストに要素をドラッグできます。
要素を#sortable1から#sortable2にドラッグする機能を維持しながら、左側のリスト(#sortable1)を並べ替えできないようにするにはどうすればよいですか(要素を再配置できないようにするため)。(#sortable2はソート可能のままである必要があります)
これが私が参照しているデモです:http:
//jqueryui.com/sortable/#connect-lists
現状では、両方のリストは並べ替え可能であり、あるリストから別のリストに要素をドラッグできます。
要素を#sortable1から#sortable2にドラッグする機能を維持しながら、左側のリスト(#sortable1)を並べ替えできないようにするにはどうすればよいですか(要素を再配置できないようにするため)。(#sortable2はソート可能のままである必要があります)
自分で修正しました。
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/ご不明
な点
がありましたらお知らせください。
次のようなものを試してください。
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/