CODEWITHSUNDEEP
javascriptjqueryjquery-uidrag-and-dropjquery-ui-sortable
Maria Jeysingh Anbu
Maria Jeysingh Anbu

Reputation: 3312

How can I restrict jQuery UI connected lists drag and drop to single direction

I am using jQuery UI Connectedlist

Here drag and drop is working fine with both side from left to right and right to left.

How can I disable right to left ? It has to work only one way, from left to right.

I need also sorting to still work inside ul yellow items like in grey items. 

$(function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();
  });
#sortable1, #sortable2 {
    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 {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
  }
<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">
 
<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>
 
 
</body>
</html>

Upvotes: 5

Views: 1444

Answers (3)

Vitaliy Terziev
Vitaliy Terziev

Reputation: 6691

The options you are looking for are cancel and update (s2 inspired by the post above), it will disable the drag on matched elements.

$(function() {
    $( "#sortable1, #sortable2" ).sortable({
        connectWith: ".connectedSortable",
        cancel: ".ui-state-highlight, .s2",
        update: function( event, ui ) {ui.item.addClass("s2");}
    }).disableSelection();
});

Upvotes: 0

T J
T J

Reputation: 43156

Currently your connectWith selector matches both the sortable, i.e it's a two way connection. If you only want one way connection from left to right, just connect the left sortable to right sortable using a more specific selector (#sortable2) than a common one:

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

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

The demo below has the shorter code that does the same thing:

$(function() {
  $(".connectedSortable").sortable({
    connectWith: "#sortable2"
   //----------^---------- #sortable2 connectWith #sortable2 has no effect
  }).disableSelection();
});
#sortable1,
#sortable2 {
  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 {
  margin: 0 5px 5px 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
}
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

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

Upvotes: 2

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

You could cancel the drag event in the right list sortable2 using receive event in sortable1 to prevent receiving any item from second list.

To drag grey lis back to the left side we will add helper class e.g s2 that will identify the sortable2 original items and cancel the drag only on them :

$("#sortable1").sortable({
     receive: function(ev, ui) {
          if(ui.item.hasClass("s2"))
               ui.sender.sortable("cancel");
     }
});

Hope this helps.

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

    $("#sortable1").sortable({
        receive: function(ev, ui) {
           if(ui.item.hasClass("s2"))
               ui.sender.sortable("cancel");
        }
    });
});
#sortable1, #sortable2 {
    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 {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
  }
<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">
 
<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 s2">Item 1</li>
  <li class="ui-state-highlight s2">Item 2</li>
  <li class="ui-state-highlight s2">Item 3</li>
  <li class="ui-state-highlight s2">Item 4</li>
  <li class="ui-state-highlight s2">Item 5</li>
</ul>
 
 
</body>
</html>

Upvotes: 3

Related Questions