[jQueryUI Sortable] connectWithを使用した制限付きのリスト間の移動

初めて質問します。説明不足等ございましたらご指摘お願いいたします。

jQueryUIのSelectableとSortableを使ってリストの選択をする画面を勉強しています。
実現可能か分からないことが出てきたため、ご教示いただければと思います。

実現したいこと

実現したいことは下記の２点です。
①ListA～ListCの項目を結果のリストのみに移動させたい。
これは、ListA～ListC に共通するクラスを宣言して、sortableのconnectWithに結果のクラスを指定すれば可能かと考えています。

②結果のリストに移動した項目は移動元のリストにしか移動できないようにしたい。
（ListAから移動した項目はListAにしか移動できない(ListB,ListCには不可))
※ただし、結果のリスト内での項目の移動は可能。

以下に現在のコードを載せます。
（どのリストへも移動可能な状態です）

現在のソースコード

html
1<body>
2<ul class="sortList ListA">
3ListA
4	<li class='ui-state-default clsA'>A1</li>
5	<li class='ui-state-default clsA'>A2</li>
6	<li class='ui-state-default clsA'>A3</li>
7	<li class='ui-state-default clsA'>A4</li>
8	<li class='ui-state-default clsA'>A5</li>
9	<li class='ui-state-default clsA'>A6</li>
10</ul>
11<ul class="sortList ListB">
12ListB
13	<li class='ui-state-default clsB'>B1</li>
14	<li class='ui-state-default clsB'>B2</li>
15	<li class='ui-state-default clsB'>B3</li>
16	<li class='ui-state-default clsB'>B4</li>
17	<li class='ui-state-default clsB'>B5</li>
18	<li class='ui-state-default clsB'>B6</li>
19</ul>
20<ul class="sortList ListC">
21ListC
22	<li class='ui-state-default clsC'>C1</li>
23	<li class='ui-state-default clsC'>C2</li>
24	<li class='ui-state-default clsC'>C3</li>
25	<li class='ui-state-default clsC'>C4</li>
26	<li class='ui-state-default clsC'>C5</li>
27	<li class='ui-state-default clsC'>C6</li>
28</ul>
29
30<ul class="sortList ListResult">
31結果
32</ul>
33
34
35<script>
36$(function(){
37	$('.sortList').selectable({
38		cancel: 'span, .ui-selected',
39		filter: '> li'
40	})
41	$('.sortList').sortable({
42		axis: 'xy',
43		cursor: "move",
44		connectWith:'.sortList',
45		helper: function(e, item){
46			if(!item.hasClass('ui-selected')){
47				item.parent().children('.ui-selected').removeClass('ui-selected');
48				item.addClass('ui-selected');
49			}
50			var selected = item.parent().children('.ui-selected').clone();
51			ph = item.outerHeight() * selected.length;
52			item.data('multidrag', selected).siblings('.ui-selected').remove();
53			return $('<tr/>').append(selected);
54		},
55		items: '> li',
56		opacity: 0.9,
57		tolerance:"pointer",
58		
59		stop: function(e, ui){
60			var selected = ui.item.data('multidrag');
61			ui.item.after(selected);
62			ui.item.remove();
63			selected.removeClass(' ui-selected');
64			$(selected).children("li").removeClass('ui-selected');
65		}
66	} );
67});
68</script>

行動規範の内容に同意します

回答1件

自己解決

試行錯誤の結果、以下の変更で実現させました。

sortableをListA,ListB,ListCとListResultに分けて記述。
ListA,ListB,ListCのconnectWithにはListResultを、ListResultのconnectWithにはListA,ListB,ListCを指定。
ListA,ListB,ListCのsortableにreceive:を追加し、複数選択されているliのクラスに別のクラスが１つでも入っていたら、並び替えをキャンセル。

質問文のソース内の<script>内のみ記載します。
まだ勉強中のため、正しくない書き方や、もっと簡潔な書き方があればご指摘ください。

JQuery
1<script>
2$(function(){
3    $('.sortList').selectable({
4        cancel: 'span, .ui-selected',
5        filter: '> li'
6    })
7	$('.ListResult').sortable({
8		axis: 'xy',
9		cursor: 'move',
10		connectWith: '.ulManryo, .ulShodan, .ulJuchu',
11		helper: function(e, item){
12			if(!item.hasClass('ui-selected')){
13				item.parent().children('.ui-selected').removeClass('ui-selected');
14				item.addClass('ui-selected');
15			}
16			var selected = item.parent().children('.ui-selected').clone();
17			ph = item.outerHeight() * selected.length;
18			item.data('multidrag', selected).siblings('.ui-selected').remove();
19			return $('<tr/>').append(selected);
20		},
21		items: '> li',
22		opacity: 0.9,
23		tolerance:'pointer',
24		
25		stop: function(e, ui){
26			var selected = ui.item.data('multidrag');
27			ui.item.after(selected);
28			ui.item.remove();
29			selected.removeClass(' ui-selected');
30			selected.children('li').removeClass('ui-selected');
31		}
32	});
33	$('.ListA, .ListB, .ListC').sortable({
34		axis: 'xy',
35		cursor: 'move',
36		connectWith: '.ulResult',
37		helper: function(e, item){
38			if(!item.hasClass('ui-selected')){
39				item.parent().children('.ui-selected').removeClass('ui-selected');
40				item.addClass('ui-selected');
41			}
42			var selected = item.parent().children('.ui-selected').clone();
43			ph = item.outerHeight() * selected.length;
44			item.data('multidrag', selected).siblings('.ui-selected').remove();
45			return $('<tr/>').append(selected);
46		},
47		items: '> li',
48		opacity: 0.9,
49		tolerance:'pointer',
50		
51		receive: function(e, ui){
52			var selected = ui.item.data('multidrag');
53			if( ($(this).hasClass('ListA') && ($(selected).hasClass('clsB') || $(selected).hasClass('clsC') )) ||
54				($(this).hasClass('ListB') && ($(selected).hasClass('clsA') || $(selected).hasClass('clsC') )) ||
55				($(this).hasClass('ListC') && ($(selected).hasClass('clsA') || $(selected).hasClass('clsB') )) ){
56				ui.sender.sortable('cancel');
57			}
58		},
59		
60		stop: function(e, ui){
61			var selected = ui.item.data('multidrag');
62			ui.item.after(selected);
63			ui.item.remove();
64			selected.removeClass('ui-selected');
65		}
66	} );
67});
68</script>