Question

我想为用户制作兴趣列表。但就在这一刻，我仍然陷入困境。我想要以下内容; 两行兴趣，一行是用户的兴趣，第二行是可能对用户感兴趣的兴趣。

现在我希望用户能够点击那里的兴趣来删除它们，我正在使用此功能（效果很好）;

// delete interest
$(".interest-item-delete").click(function() {
    $(this).closest('.interests-item').replaceWith('<div class="interests-item-empty">Sleep<br>hier iets<br>wat je leuk<br>vindt</div>');
});

然后我希望用户能够将兴趣添加到当前兴趣列表中的空白区域（具有类“interest-item-empty”的div）。我正在使用它也很好用;

// add interest
$('.interests-search-image').draggable({
    revert: 'invalid',
});
$('.interests-item-empty').droppable({
    accept: '.interests-search-image',
    drop: function(ev, ui){
        var title = $(ui.draggable).attr("data-title");
        var imgSrc = $(ui.draggable).attr("data-imgSrc");
        var categorie = $(ui.draggable).attr("data-cat");

        $(ui.draggable).remove();
        $(this).replaceWith('<div class="interests-item"><div class="interest-item-category">'+categorie+'</div><div class="interest-item-image"><img src="'+imgSrc+'"><div class="interest-item-delete">X</div></div><div class="interest-item-title">'+title+'</div></div>');
    },
});

但现在我遇到了2个问题; 1.当我删除一个项目时，我不能删除任何东西（虽然它确实有正确的类）。 2.我将一个项目拖到用户的兴趣列表中，我无法删除它们。

我猜这两个问题都有同样的解决方案，我对此并不熟悉。希望你能帮帮我。

根据要求：我已经尝试过的东西;

// delete interest
$(".interest-item-delete").click(function() {
    $(this).closest('.interests-item').replaceWith('<div class="interests-item-empty">Sleep<br>hier iets<br>wat je leuk<br>vindt</div>');
    $('.interests-item-empty').droppable({
        accept: '.interests-search-image',
        drop: function(ev, ui){
            var title = $(ui.draggable).attr("data-title");
            var imgSrc = $(ui.draggable).attr("data-imgSrc");
            var categorie = $(ui.draggable).attr("data-cat");
        $(ui.draggable).remove();
        $(this).replaceWith('<div class="interests-item"><div class="interest-item-category">'+categorie+'</div><div class="interest-item-image"><img src="'+imgSrc+'"><div class="interest-item-delete">X</div></div><div class="interest-item-title">'+title+'</div></div>');
        $(".interest-item-delete").click(function() {
            $(this).closest('.interests-item').replaceWith('<div class="interests-item-empty">Sleep<br>hier iets<br>wat je leuk<br>vindt</div>');
            $('.interests-item-empty').droppable({
                accept: '.interests-search-image',
                drop: function(ev, ui){
                    var title = $(ui.draggable).attr("data-title");
                    var imgSrc = $(ui.draggable).attr("data-imgSrc");
                    var categorie = $(ui.draggable).attr("data-cat");

                    $(ui.draggable).remove();
                    $(this).replaceWith('<div class="interests-item"><div class="interest-item-category">'+categorie+'</div><div class="interest-item-image"><img src="'+imgSrc+'"><div class="interest-item-delete">X</div></div><div class="interest-item-title">'+title+'</div></div>');

                },
            });
        });
    },
});
});

如上所述，这将使拖动的项目可删除。但是当我删除它并在其上放一个新项目时该项目是不可删除的。这就是为什么我认为我需要一个循环或其他东西。

Answer 1

看看它是否适合您。基本上，只在特定元素上初始化droppable，而不是匹配元素集：

{因为我很难阅读你的代码，所以可能会遗漏某些内容}

修改

添加了.off('click')，因为您似乎将点击事件重新绑定到已经有界的元素

$(document).on('click',".interest-item-delete",function () { var $itemEmpty = $('<div class="interests-item-empty">Sleep<br>hier iets<br>wat je leuk<br>vindt</div>'); $(this).closest('.interests-item').replaceWith($itemEmpty); $itemEmpty.droppable({ accept: '.interests-search-image', drop: function (ev, ui) { var title = $(ui.draggable).attr("data-title"); var imgSrc = $(ui.draggable).attr("data-imgSrc"); var categorie = $(ui.draggable).attr("data-cat"); $(ui.draggable).remove(); $(this).replaceWith('<div class="interests-item"><div class="interest-item-category">' + categorie + '</div><div class="interest-item-image"><img src="' + imgSrc + '"><div class="interest-item-delete">X</div></div><div class="interest-item-title">' + title + '</div></div>'); $(".interest-item-delete").off('click').click(function () { var $itemEmpty = $('<div class="interests-item-empty">Sleep<br>hier iets<br>wat je leuk<br>vindt</div>'); $(this).closest('.interests-item').replaceWith($itemEmpty); $itemEmpty.droppable({ accept: '.interests-search-image', drop: function (ev, ui) { var title = $(ui.draggable).attr("data-title"); var imgSrc = $(ui.draggable).attr("data-imgSrc"); var categorie = $(ui.draggable).attr("data-cat"); $(ui.draggable).remove(); $(this).replaceWith('<div class="interests-item"><div class="interest-item-category">' + categorie + '</div><div class="interest-item-image"><img src="' + imgSrc + '"><div class="interest-item-delete">X</div></div><div class="interest-item-title">' + title + '</div></div>'); }, }); }); }, }); });

Answer 2

这不是完美的解决方案。我建议你每个项目都需要更多OO的想法。请考虑我丑陋的代码。

$(function () {

    var droppableOptions = {
        accept: '.interests-search-image',
        drop: function (ev, ui) {
            var title = $(ui.draggable).attr("data-title");
            var imgSrc = $(ui.draggable).attr("data-imgSrc");
            var categorie = $(ui.draggable).attr("data-cat");

            $(ui.draggable).remove();
            var $item = $(this).removeClass("interests-item-empty")
                .addClass("interests-item");
            $item.html('<div class="interest-item-category">' + categorie + '</div><div class="interest-item-image"><img src="' + imgSrc + '"><div class="interest-item-delete">X</div></div><div class="interest-item-title">' + title + '</div>');
        }
    };
    // delete interest

    $(document).on("click.item-delete", ".interest-item-delete", function () {
            var $item = $(this).closest(".interests-item");
            $item.removeClass("interests-item")
                .addClass("interests-item-empty")
                .html("Sleep<br>hier iets<br>wat je leuk<br>vindt");
            $item.droppable(droppableOptions);
        });

    $('.interests-search-image').draggable({
            revert: 'invalid'
        });
    $('.interests-item-empty').droppable(droppableOptions);

});

您可以使用.on() method.这对您的情况有帮助。

如何使用.replaceWith（）将函数附加到可拖动项目

2 个答案: