Как добавить функции к перетаскиваемым элементам с .replaceWith()

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

Тогда я хочу, чтобы пользователь, чтобы иметь возможность добавлять интересы пустых пространств в там текущем списке интересов (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

Это не идеальное решение. Я рекомендую вам, чтобы каждый элемент должен быть больше идей 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. Это будет полезно для вашей ситуации.

Answer 2

Посмотрите, работает ли он на вас. В основном, инициализировать Droppable только на конкретный элемент, а не набор соответствующих элементов:

{что-то могло не быть, как я имею трудное время, чтобы прочитать код}

EDIT

добавил .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>'); 

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