JQuery детерминированный упал предмет (падение события)

Question

Я хотел бы изменить цвет фона в классе после падения Дифференц элементов

• Если падение card1 -> класса .stack должен быть синим
• Если падение Card2 -> класс .stack должен быть красным

$(".stackDrop").droppable({ 
    tolerance: "intersect", 
    accept: ".card1, .card2", 
    activeClass: "ui-state-default", 
    hoverClass: "ui-state-hover", 
    drop: function(event, ui) {   
     $(this).append($(ui.draggable)); 
     $('.stack').css('background-color','red'); 
    } 
}); 

Существует прямая связь с jsfiddle https://jsfiddle.net/70x2set8/1/

Answer 1

Вы можете получить доступ к выпавшим свойствам карты от случая с $(event.ElementTo) так одно решением может быть:

$(".stackDrop").droppable({ 
      tolerance: "intersect", 
      accept: ".card1, .card2", 
      activeClass: "ui-state-default", 
      hoverClass: "ui-state-hover", 
      drop: function(event, ui) {   
       $(this).append($(ui.draggable)); 
       if($(event.toElement).hasClass("card1")) 
        $('.stack').css('background-color','blue'); 
       if($(event.toElement).hasClass("card2")) 
        $('.stack').css('background-color','red'); 
      } 
     }); 

, но я предлагаю лучший способ с ключ-значением объектов массива:

$(document).ready(function() { 
    var array = [{key:"card1", value:"blue"},{key:"card2", value:"red"}] 
    $(".card1, .card2").draggable({ 
    appendTo: "body", 
    cursor: "move", 
    helper: 'clone', 
    revert: "invalid", 
    }); 

    $(".stackDrop").droppable({ 
    tolerance: "intersect", 
    accept: ".card1, .card2", 
    activeClass: "ui-state-default", 
    hoverClass: "ui-state-hover", 
    drop: function(event, ui) { 
     $(this).append($(ui.draggable)); 
     array.forEach(function(el){ 
     if($(event.toElement).hasClass(el.key)) 
      $('.stack').css('background-color',el.value); 
     }) 

    } 
    }); 
}); 

Как вы можете видеть , с помощью этого решения вы можете добавить больше элементов и установить их класс и цвет в массив.