delete the original item from the DOM after drop using jquery

Question

Hi I am using jquery sortable and drag to remove item. The item can be drag but it didn't stay on the dropping position. Would you tell me how to do it.

There is my code:

$(function() {
  $("#sortable").sortable({
    revert: true,
    stop: function(event, ui) {
      if (!ui.item.data('tag') && !ui.item.data('handle')) {
        ui.item.data('tag', true);
        ui.item.fadeTo(400, 0.1);
        ui.item.remove();
      }
    }
  });

  $(".draggable").draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid"
  });
  $("ul, li").disableSelection();
});

    ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
    li { margin: 5px; padding: 5px; width: 150px; }

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<table style="border:5px solid red; width: 50%;">
  <tr>
    <td style="border:5px solid black">
      <ul>
        <li class="ui-state-highlight draggable">One</li>
        <li class="ui-state-highlight draggable">Two</li>
      </ul>
    </td>
    <td>
      <ul id="sortable">
        <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>
    </td>
  </tr>
</table>

Answer 1

To copy an item from the left list to the right list, you use

helper:"clone"

if you don't want to copy but instead move then don't specify a helper or specify the default:

helper:"original"

The reason the item is disappearing once dropped is that you are changing the "dropped" item in sortable - this is the wrong place to do this. In sortable, ui.item is the item being sorted (not being dropped - that operation has already completed).

You can confirm this by moving "Item 2" (eg) on the right panel to a different position in your original code; it will be removed.

So the simple solution is to remove the ui.item.fade and ui.item.remove within sortable.

Combined with not creating a clone, should give you the results you are after.

$(function() {
  $("#sortable").sortable({
    revert: true,
    stop: function(event, ui) {
      if (!ui.item.data('tag') && !ui.item.data('handle')) {
        ui.item.data('tag', true);
        //ui.item.fadeTo(400, 0.1);
        //ui.item.remove();
      }
    }
  });

  $(".draggable").draggable({
    connectToSortable: "#sortable",
    //helper: "clone",
    revert: "invalid"
  });
  $("ul, li").disableSelection();
});

ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
    li { margin: 5px; padding: 5px; width: 150px; }

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<table style="border:5px solid red; width: 50%;">
  <tr>
    <td style="border:5px solid black">
      <ul>
        <li class="ui-state-highlight draggable">One</li>
        <li class="ui-state-highlight draggable">Two</li>
      </ul>
    </td>
    <td>
      <ul id="sortable">
        <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>
    </td>
  </tr>
</table>