One Way Drag and Drop Between Two Lists

Question

I'm using the following JS code which I obtained from jQuery UI: moving items from one list to another:

$("#list-one, #list-two").sortable({
                    connectWith: '.connectedSortable',
                    start: function () {
                        sender = $(this);
                        recvok = false;
                    },
                    over: function () {
                        recvok = ($(this).not(sender).length != 0);
                    },
                    stop: function () {
                        if (!recvok)
                            $(this).sortable('cancel');
                    }
                }).disableSelection();

This code allows drag and drop from the first to the second list and vice-versa. I only want drag and drop to work in one direction, from the first to the second list. Is this possible? Any help would be greatly appreciated. Thanks.

To finalize the answer, Please remember to accept and vote up the answer if your original issue has been solved and then ask a new question if you have another issue:stackoverflow.com/help/someone-answers — Frenchy

Frenchy Frenchy · Accepted Answer · 2020-12-03T12:46:57

You just change the attribute connectWith: here i refuse to drag from list2 to list1..

  $("#list-one, #list-two").sortable({
                    connectWith: '#list-two',
                    start: function () {
                        sender = $(this);
                        recvok = false;
                    },
                    over: function () {
                        recvok = ($(this).not(sender).length != 0);
                    },
                    stop: function () {
                        if (!recvok)
                            $(this).sortable('cancel');
                    }
                }).disableSelection();

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable - Connect lists</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #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;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<body>
 
<ul id="list-one" 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="list-two" 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>

another solution is to prevent the mousedown event on second list, but you cant reorder the list

  $('#list-two li').mousedown(function(event){
   event.preventDefault();
   event.stopPropagation();
  });

  $("#list-one, #list-two").sortable({
                    connectWith: '.connectedSortable',
                    start: function () {
                        sender = $(this);
                        recvok = false;
                    },
                    over: function () {
                        recvok = ($(this).not(sender).length != 0);
                    },
                    stop: function () {
                        if (!recvok)
                            $(this).sortable('cancel');
                    }
                }).disableSelection();

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable - Connect lists</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #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;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<body>
 
<ul id="list-one" 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="list-two" 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>

One Way Drag and Drop Between Two Lists

1 Answers