Jquery Drag drop - один список с возможностью сортировки и другой список с возможностью перетаскивания и удаления без сортировки - PullRequest
Новая
       6

Jquery Drag drop - один список с возможностью сортировки и другой список с возможностью перетаскивания и удаления без сортировки

1 голос
/ 29 марта 2020

Я пытаюсь перетащить элементы между двумя списками,

Мои требования:

Список A (с перетаскиванием в список B, но не сортируется) элемент 1 элемент 2 элемент 3

Список B (с возможностью сортировки и перетаскивания в список A) элемент 4 элемент 5 элемент 6

я попробовал .sortable () , но это делает Список A с сортируемой функциональностью, 

<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, но показывает мне ошибку

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

Ошибка: jquery -ui. js: 16692 Uncaught TypeError: Не удалось прочитать свойство 'removeChild' со значением null

Пожалуйста, кто-нибудь поможет мне разрешить это дело

1 Ответ

0 голосов
/ 31 марта 2020

Вот то, что я придумал.

Я разрешаю сортировку при перетаскивании элемента в первый список, чтобы вы могли выбирать, куда его поместить, после того как элемент будет удален, список больше не будет быть сортируемым Если вы не хотите этого, пожалуйста, дайте мне знать.

Опция перетаскивания revert выглядит немного странно, но включена, чтобы перетаскиваемые элементы не плавали повсюду.

Я инициализирую каждый список как сортируемый отдельно.

В первом списке есть перетаскиваемые элементы, и мы не хотим разрешать сортировку в этом списке, поэтому при начале перетаскивания мы отключим сортировку с помощью selector.sortable('disable'). Как только мы получим элемент в первом списке, нам нужно отключить сортировку, чтобы эти элементы больше не сортировались. Затем мы инициализируем отброшенный элемент с помощью перетаскиваемого элемента.

Во втором списке, когда мы начинаем перетаскивать элемент, мы хотим включить сортировку в первом списке, чтобы мы могли выбирать, куда его отбрасывать. При получении элемента во втором списке, если этот элемент является перетаскиваемым, мы хотим уничтожить перетаскиваемый объект, чтобы он стал только сортируемым элементом.

Вот моя скрипка

Надеюсь, это то, что вы ищете! 

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