Ändern Sie die Farbe des Artikels, der in der Liste gelöscht wird, nachdem das Objekt gelöscht wurde

Question

Ich möchte die Farbe des Objekts ändern, nachdem es in das DropPable-Feld gezogen wurde. Wie kann es gemacht werden? Hier ist fiddle ich habe. So wie ich sagte, ich möchte Farbe des gefallenen Gegenstandes ändern, wenn er fallen gelassen wurde. Und Javascript-Code:

$(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

Sie können das Element erhalten, das von ui.item auf erhalten Fall sortierbar Tropfen auf Ihren Behälter ist und die Farbe ändern für sie.

Versuchen Sie, diese

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

Hier arbeitet Geige https://jsfiddle.net/cqLv5n64/2/

Answer 2

ein wenig schwierig, da ui.item im receive: function(event, ui) Teil Ihrer .sortable Referenzen des Original Element, in Bezug auf das abgelegte Element gegenüber.

Allerdings, wenn Sie ändern Ihre sortierbar wie folgt:

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

(Hinzufügen des beforeStop Attribut), dann können Sie draggedItem zugreifen (die das gezogene/gesunken verweist neue Element).

Aktualisiert Geige: https://jsfiddle.net/bbthwfr2/2/

Edit: Ändern der Farbe des Elements Original ist viel einfacher:

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

(beforeStop ist nicht erforderlich).

Aktualisiert Geige: https://jsfiddle.net/bbthwfr2/3/