How to add functions to draggable elements with .replaceWith ()

advertisements

I want to make an interests list for users. But at this moment im a litle stuck. I want the following; Two rows of interests, one which are the interests of the user, the second one are interests which might be interesting for users.

Now i want the user to be able to click on there interests to delete them, i am using this function for that (works great);

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

Then i want the user to be able to add interests to the empty spaces in there current interests list (div with class "interests-item-empty"). I am using this which also works great;

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

But now i got 2 problems; 1. When i delete an item i can't drop anything on it (while it does have the correct class). 2. Whene i dragged an item to the interest list of the user i am unable to delete them.

I am guessing that both problems have an same kind of solution which i am just unfamiliar with. Hope you can help me.

On request: What i already have tried;

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

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

As said this would make the dragged item deleteable. But when i delete it and drop a new item on it that item isn't deleteable. So thats why i think i need a loop or something.


It is not perfect solution. I recommend you that each item need to be more OO idea. Please consider my ugly code.

$(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);

});

You can use .on() method. It will be helpful for your situation.