删除项目后更改列表中正在删除的项目的颜色

Question

我想在项目拖放到可放置字段后更改项目的颜色。怎么做到的？这是 fiddle 我有的。所以正如我所说的，我想改变掉落物品的颜色。和 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

有点棘手，因为 .sortable 的 receive: function(event, ui) 部分中的 ui.item 引用了 original 元素，而不是删除的元素元素.

但是，如果您按如下方式修改 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（它引用 dragged/dropped new 元素）。

已更新 fiddle：https://jsfiddle.net/bbthwfr2/2/

编辑： 更改原始元素的颜色要简单得多：

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

（不需要beforeStop）。

已更新 fiddle：https://jsfiddle.net/bbthwfr2/3/

Answer 2

您可以在 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
      });

这里正在工作fiddlehttps://jsfiddle.net/cqLv5n64/2/

删除项目后更改列表中正在删除的项目的颜色

Change color of item being dropped in list after item is dropped

javascript

jquery

css

jquery-ui-draggable

jquery-ui-droppable