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

有点棘手，因为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/

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

这是工作小提琴https://jsfiddle.net/cqLv5n64/2/

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

2 个答案: