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