jQuery拖放-一个带有可排序列表，另一个带有可拖动&列表无需分类即可投放 [英] 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,

我的要求是

列表A (可拖放到列表B但不能排序) 项目1 项目2 项目3

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

列表B (可排序并拖放到列表A) 项目4 项目5 项目6

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

我尝试了 .sortable()，但是它使列表A具有可排序的功能，

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();
  } );

我什至试图在beforeStop事件中停止可排序，但显示错误

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

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

错误: jquery-ui.js:16692未捕获的TypeError:无法读取null的属性"removeChild"

请任何人帮助我解决此问题

Please anyone help me out to resolve this case

推荐答案

这是我想出的.

当我将一个项目拖到第一个列表中时，我允许进行排序，以便您可以选择放置位置，一旦删除该项目，该列表将不再可排序.如果您不希望这样做，请告诉我.

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.

可拖动的revert选项似乎有点小故障，但它包含了该选项，以便可拖动的项不会在整个位置浮动.

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.

第一个列表具有可拖动项，我们不想在此列表中允许可排序，因此在拖动开始时，我们将使用selector.sortable('disable')禁用可排序性.一旦我们收到第一个列表中的项目，就需要禁用可排序性，以使这些项目不再可排序.然后，我们将使用Draggable初始化放置的项目.

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.

这是我的小提琴

希望这就是您想要的！

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>

这篇关于jQuery拖放-一个带有可排序列表，另一个带有可拖动&列表无需分类即可投放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！