1

我想为用户制作一个兴趣列表。但此时我有点卡住了。我想要以下内容；两行兴趣，一是用户的兴趣，一是用户可能感兴趣的兴趣。

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

// 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”的 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>');
    },
});

但现在我遇到了两个问题；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>');

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

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

4

2 回答 2

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>');

                    },
                });
            });
        },
    });
});
于 2013-05-31T12:43:35.020 回答
1

这不是完美的解决方案。我建议你每个项目都需要更多的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() 方法。这将对您的情况有所帮助。

于 2013-05-31T13:00:04.740 回答