jQuery可拖動 - 只記住第一個拖動

Question

我有2個項目。當你將這些物品拖到一個顏色上時，它應該會發出警報，並告訴你所選擇的物品以及你拖到的顏色。

顏色提醒工作正常，但它只記得您拖動的第一個項目 - 直到您刷新頁面並選擇另一個項目。

我創建了兩個單獨的可拖動實例，但仍然出現問題。我無法弄清楚愛情和金錢！

這裏是一個的jsfiddle：https://jsfiddle.net/ytcqsch6/

HTML

<div id="color-block-1" class="color-blocks" theColor="blue"></div> 
    <div id="color-block-2" class="color-blocks" theColor="purple"></div> 
    <div id="color-block-3" class="color-blocks" theColor="pink"></div> 


    <div id="choose-box"> 
     <h1 id="choose-box-header">Title</h1> 
     <div id="drag-box"> 
      <div class="drag drag-eg" >ELECTRICAL<br>GOODS</div> 
      <div class="drag drag-fa" >FASHION</div> 
     </div> 
    </div> 

<script 
    src="https://code.jquery.com/jquery-2.2.4.min.js" 
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
    crossorigin="anonymous"></script> 
<script 
    src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" 
    integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" 
    crossorigin="anonymous"></script> 

JS：

/// DRAGGABLE /// 
$.fn.liveDroppable = function (opts) { 
     if (!$(this).data("ctDropInit")) { 
      $(this).data("ctDropInit", true).droppable(opts); 
     } 
}; 

$(".drag-eg").each(function(index, elem) { 
    $(elem).draggable({ 
     cursor: "grab", 
     distance: 0, 
     opacity: 1, 
     helper: 'clone', 
     start: function() { 
      $(this).css("opacity","0"); 
      startDroppable("Electrical Goods"); 
     }, 
     stop: function() { 
      $(this).css("opacity","1"); 
     } 
    }); 
}); 

$(".drag-fa").each(function(index, elem) { 
    $(elem).draggable({ 
     cursor: "grab", 
     distance: 0, 
     opacity: 1, 
     helper: 'clone', 
     start: function() { 
      $(this).css("opacity","0"); 
      startDroppable("Fashion"); 
     }, 
     stop: function() { 
      $(this).css("opacity","1"); 
     } 
    }); 
}); 


function startDroppable($industry){ 
    $('.color-blocks').liveDroppable({ 
     hoverClass: "ctDropHover", 
     drop: function (event, ui) { 
      alert("Dropped! - " + $industry + "----" + $(this).attr("theColor")); 
    } 
}); 
} 
/// DRAGGABLE END /// 

Answer 1

喜嘗試在js代碼如下。

/// DRAGGABLE /// 
$.fn.liveDroppable = function (opts) { 
     if (!$(this).data("ctDropInit")) { 
      $(this).data("ctDropInit", true).droppable(opts); 
     } 
}; 

$(".drag-eg").each(function(index, elem) { 

    $(elem).draggable({ 
     cursor: "grab", 
     distance: 0, 
     opacity: 1, 
     helper: 'clone', 
     start: function() { 
      $(this).css("opacity","0"); 
      startDroppable("Electrical Goods"); 
     }, 
     stop: function() { 
      $(this).css("opacity","1"); 
     } 
    }); 
}); 

$(".drag-fa").each(function(index, elem) { 
    $(elem).draggable({ 
     cursor: "grab", 
     distance: 0, 
     opacity: 1, 
     helper: 'clone', 
     start: function() { 
      $(this).css("opacity","0"); 
      startDroppable("Fashion"); 
     }, 
     stop: function() { 
      $(this).css("opacity","1"); 
     } 
    }); 
}); 


function startDroppable($industry){ 
    $('.color-blocks').liveDroppable({ 
     hoverClass: "ctDropHover", 
     drop: function (event, ui) { 
      alert("Dropped! - " + $(ui.draggable[0]).text() + "----" + $(this).attr("theColor")); //only changed here.. 

    } 
}); 
} 
/// DRAGGABLE END ///