更改要刪除的項目的顏色jquery

Question

我有一個小提琴，我希望能夠在放下手風琴后更改其顏色。 這是拖放功能的腳本：

$(function() {
    var itm = [];
    $("#savebutton").click(function() {
        LISTOBJ.saveList();
    });
    $("#myAccordion").accordion({
        heightStyle: "content",
        active: false,
        collapsible: true
    });
    $("#myAccordion li").draggable({
        appendTo: "body",
        helper: "clone"
    });
    $(".leader ol").droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        accept: ":not(.ui-sortable-helper)",
        drop: function(event, ui) {
            var zz = ui.draggable.text()
            var xyz = itm.includes(zz);
            if (xyz === false) {
                $(this).find(".placeholder").remove();
                $("<li></li>").text(ui.draggable.text())
                    //.addClass("cart-item")
                    .addClass('dropClass')
                    .appendTo(this);

                //add to array
                itm.push(zz);
                //add style
                $('.ui-droppable').find("li.ui-draggable:contains('" + zz + "')").addClass('bred');
                var n = $(this).closest("div.proc").find(".dropClass").length;
                $(this).closest("div.proc").find("span").text("Items Dropped: " + n + ".");

            } else {
                alert('Name is Already Exist');
            }

        },
        out: function(event, ui) {
            count = count - 1;
            $(this)
                .addClass("ui-state-highlight")
                .find(".myAccordion")
                .html("Out!");
            $(this).closest("div.proc").find("span").text("Items Dropped: " + n + ".");
        }
    }).sortable({
        items: "li:not(.placeholder)",
        sort: function() {
            $(this).removeClass("ui-state-default");
            $(ui.item).css("background", "red");
        }
    });
    $(".checker ol").droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        accept: ":not(.ui-sortable-helper)",
        drop: function(event, ui) {
            var zz = ui.draggable.text()
            var xyz = itm.includes(zz);
            if (xyz === false) {
                $(this).find(".placeholder").remove();
                $("<li></li>").text(ui.draggable.text())
                    //.addClass("cart-item")
                    .addClass('dropClass')
                    .appendTo(this);

                //add to array
                itm.push(zz);
                //add style
                $('.ui-droppable').find("li.ui-draggable:contains('" + zz + "')").addClass('bred');
                var n = $(this).closest("div.proc").find(".dropClass").length;
                $(this).closest("div.proc").find("span").text("Items Dropped: " + n + ".");

            } else {
                alert('Name is Already Exist');
            }

        },
        out: function(event, ui) {
            count = count - 1;
            $(this)

            find(".dropClass")
            $(this).closest("div.proc").find("span").text("Items Dropped: " + n + ".");

        }
    }).sortable({
        items: "li:not(.placeholder)",
        sort: function() {
            $(this).removeClass("ui-state-default");
        }
    });
    $("#myAccordion ul").droppable({
        drop: function(event, ui) {
            $(ui.draggable).remove();
            var zz = ui.draggable.text()
            $('.ui-droppable').find("li.ui-draggable:contains('" + zz + "')").removeClass('bred');

            var indexItm = itm.indexOf(zz);
            if (indexItm > -1) {
                itm.splice(indexItm, 1);
            }
        },
        hoverClass: "ui-state-hover"
            //accept: '.cart-item'
    });
});
var LISTOBJ = {
    saveList: function() {
        $(".proc").each(function() {
            var listCSV = [];
            $(this).find("li").each(function() {
                listCSV.push($(this).text());
            });
            var values = listCSV.join(', ');
            $(".procChecker").append("<input type='hidden' name='prodstuff[]' value='+values+' />");
            $("#output").append("<p>" + values + "</p>");
            console.debug(listCSV);
        });
    }
}

正如我所說，我想更改放置在手風琴中的物品的顏色。 我怎樣才能做到這一點？

Answer 1

您可以嘗試以下方法：

在您的可拖動函數中，添加：

$("#myAccordion li").draggable({
    appendTo: "body",
    helper: "clone",
    drag: function(e, i) {
        if (!$(this).hasClass('blue')) {
            $(this).addClass('blue');
        }
    }
});

然后在您的CSS中添加：

.blue{ background-color: blue;}

Answer 2

據我了解，您想更改放置在某處的源元素的顏色。 為此，您需要在開始拖動它時存儲該源元素對象。 當對象拖動完成或放下時，您可以更改顏色。

參見參考小提琴，

<a href="Link">http://jsfiddle.net/Geupm/365/">Link</a>

請讓我知道這對你有沒有用。

Answer 3

添加一小行css以覆蓋默認值，如下所示：

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background: red !important;
}

更新的fiddel： https ://jsfiddle.net/ny1n9gm0/13/