jQuery draggable - 最初のドラッグだけが記憶されます

Question

私は2つのアイテムがあります。アイテムを色にドラッグすると、選択したアイテムとドラッグしたアイテムの色が表示されます。

カラーアラートは正常に機能しますが、ページを更新して別のアイテムを選択するまで、ドラッグした最初のアイテムは覚えています。

私は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

HI 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 ///