jQuery UI sortable特定の要素間のみDisabledしたい

お世話になります。
jQuery UI sortableを使って複数のリスト繋いでいて現状は３つのリストどこからどこでも行き来できるようになっているのですが
これに追加して１→２と 2→１間だけは双方向行き来できないようにしたいと思っています。
ご教示の方よろしくお願いいたします。

lang
1
2$('.sortable1, .sortable2, .sortable3').sortable({
3        connectWith: '.connected'
4    });
5

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

回答2件

tkturbo さんのコードを参考と、DEMOページをこぴぺして作成しました。
ちゃんと動きましたよ。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Sortable - Connect lists</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #sortable1, #sortable2, #sortable3 {
    border: 1px solid #eee;
    width: 142px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
  }
  #sortable1 li, #sortable2 li, #sortable3 li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
  }
  </style>
  <script>
  $(function() {
    $('#sortable1').sortable({
        connectWith: '#sortable3'
    });
    $('#sortable2').sortable({
        connectWith: '#sortable3'
    });
    $('#sortable3').sortable({
        connectWith: '#sortable1, #sortable2'
    });

  });
  </script>
</head>
<body>

<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>


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

</body>
</html>

投稿2016/03/07 08:50

JinwonKim

総合スコア312

ベストアンサー

つまり、

・1からは3だけに行く
・2からは3だけに行く
・3からは1と2に行ける

ですかね。

だったら

$('.sortable1').sortable({
    connectWith: '.sortable3'
});
$('.sortable2').sortable({
    connectWith: '.sortable3'
});
$('.sortable3').sortable({
    connectWith: '.sortable1, .sortable2'
});

これじゃだめですか？

投稿2016/03/04 09:15