Question

我有fiddle我希望能够在手风琴被丢弃后更改其内部项目的颜色。这是拖放功能的脚本：

$(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/

更改正在删除的项目的颜色jquery

3 个答案: