Jquery Drag drop - One list with sortable and other list with draggable & droppable without sort

问题

I am trying to drag drop items between two lists,

My requirements are,

List A (with drag and drop to List B but not sortable) item 1 item 2 item 3

List B (with sortable and drag/drop to List A) item 4 item 5 item 6

i tried the .sortable(), but it makes the List A with sortable functionality,

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

$( function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable",
      beforeStop: function (event, ui) {
      console.log($(ui.helper).parent().attr('id'));
      console.log($(ui.placeholder).parent().attr('id'));
      if($(ui.helper).parent().attr('id') === 'sortable1' && $(ui.placeholder).parent().attr('id') === 'sortable1')
      {
                $(this).sortable('cancel');
          }
             },
    }).disableSelection();
  } );

I even tried to stop the sortable in beforeStop event, but shows me error

$(this).sortable('cancel');

Error: jquery-ui.js:16692 Uncaught TypeError: Cannot read property 'removeChild' of null

Please anyone help me out to resolve this case

回答1:

Here is what I came up with.

I am allowing sortable when dragging an item into the first list so that you can choose where to place it, once an the item is dropped the list will no longer be sortable. If you do not want this please let me know.

The draggable revert option seems to be a bit glitchy but it's included so that the draggable items don't float all over the place.

I am initializing each list as a sortable separately.

The first list has draggable items and we do not want to allow sortable within this list so on drag start we will disable sortability using selector.sortable('disable'). Once we receive an item in the first list we need to disable sortability so that these items are no longer sortable. Then we will initialize the dropped item with draggable.

In the second list when we start dragging an item we want to enable sortable on the first list so that we can choose where to drop it. When receiving an item in the second list, if that item is a draggable we want to destroy the draggable so that it is now only a sortable item.

Here is my fiddle

Hope this is what you are looking for!

init_draggable($('.draggable-item'));

$('#sortable2').sortable({
  connectWith: '#sortable1, #sortable2',
  items: '.draggable-item, .sortable-item',
  start: function(event, ui) {
    $('#sortable1').sortable('enable');
  },
  receive: function(event, ui) {
    if (ui.item.hasClass('ui-draggable')) {
      // destroy draggable so that we can drag outside the sortable container
      ui.item.draggable("destroy");
    }
  }
});

$('#sortable1').sortable({
  connectWith: '#sortable1, #sortable2',
  items: '.draggable-item, .sortable-item',
  receive: function(event, ui) {
    $('#sortable1').sortable('disable');
    var widget = ui.item;
    init_draggable(widget);
  }
});

function init_draggable(widget) {
  widget.draggable({
    connectToSortable: '#sortable2',
    stack: '.draggable-item',
    revert: true,
    revertDuration: 200,
    start: function(event, ui) {
      $('#sortable1').sortable('disable');
    }
  });
}

ul {
  padding: 10px;
  list-style-type: none;
  width: 200px;
}

li {
  text-align: center;
  padding: 5px 10px;
  margin: 5px;
}

.draggable-item {
  background: #9bcdf0;
}

.sortable-item {
  background: #6c2020;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default draggable-item">Item 1</li>
  <li class="ui-state-default draggable-item">Item 2</li>
  <li class="ui-state-default draggable-item">Item 3</li>
  <li class="ui-state-default draggable-item">Item 4</li>
  <li class="ui-state-default draggable-item">Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight sortable-item">Item 1</li>
  <li class="ui-state-highlight sortable-item">Item 2</li>
  <li class="ui-state-highlight sortable-item">Item 3</li>
  <li class="ui-state-highlight sortable-item">Item 4</li>
  <li class="ui-state-highlight sortable-item">Item 5</li>
</ul>

来源：https://stackoverflow.com/questions/60911002/jquery-drag-drop-one-list-with-sortable-and-other-list-with-draggable-droppa