Изменить цвет предмета, который будет добавлен в список после того, как предмет будет удален

Question

Я хочу изменить цвет предмета после его перетаскивания в выбрасываемое поле. Как это можно сделать? Вот такая у меня скрипка. Итак, как я уже сказал, я хочу, чтобы цвет выпавшего предмета менялся при его падении. И код JavaScript:

$(function() {
  var x = $(".addtofavs li").length;
  var y = $(".addtoquicklinks li").length;
  $("#atf-count").text(x);
  $("#atq-count").text(y);
  $("#catalog ").accordion({
    heightStyle: "content",
    active: false,
    collapsible: true
  });
  $("#myAccordion li").draggable({
    connectToSortable: '.container',
    helper: 'clone',
    revertDuration: 0,
    create: function() {
      var eq = $(this).index();
      $(this).attr('data-index', eq);
    }
  });

  $(".container").sortable({
    connectWith: '.container',
    placeholder: "ui-state-highlight",
    receive: function(event, ui) {
      var uiIndex = ui.item.attr('data-index');
      var item = $(this).find('[data-index=' + uiIndex + ']');
      if (item.length > 1) {
        item.last().remove();
      }
    },
    revert: true
  });

  $(".container li").draggable({
    connectToSortable: '.container',
    placeholder: "ui-state-highlight",
    revert: true
  });
});

Answer 1

Вы можете получить элемент, который перетаскивается в ваш контейнер, при получении события сортировки по ui.item и изменения цвета для него.

Попробуй это

$(".container").sortable({
        connectWith: '.container',
        placeholder: "ui-state-highlight",
        receive: function(event, ui) {
          var uiIndex = ui.item.attr('data-index');
          var item = $(this).find('[data-index=' + uiIndex + ']');
          if (item.length > 1) {
            item.last().remove();
          }
          $(ui.item).css("background", "red");
        },
        revert: true
      });

Здесь работает скрипка https://jsfiddle.net/cqLv5n64/2/

Answer 2

Немного сложно, как ui.item в receive: function(event, ui) часть вашего .sortable ссылается на оригинальный элемент, а не на пропущенный элемент.

Однако, если вы измените свой сортируемый следующим образом:

$(".container").sortable({
    connectWith: '.container',
    placeholder: "ui-state-highlight",
    beforeStop: function (event, ui) { draggedItem = ui.item;},
    receive: function(event, ui) {
      draggedItem.css("background", "blue");

(Добавление beforeStop атрибут), то вы можете получить доступ к draggedItem (который ссылается на перетаскиваемый новый элемент).

Обновленная скрипка: https://jsfiddle.net/bbthwfr2/2/

Изменить: Изменить цвет исходного элемента намного проще:

receive: function(event, ui) {
      ui.item.css("background", "blue");

(beforeStop не требуется).

Обновленная скрипка: https://jsfiddle.net/bbthwfr2/3/