Функция не работает после перетаскивания объекта - PullRequest
Новая
       6

Функция не работает после перетаскивания объекта

0 голосов
/ 06 июля 2018

Я создал этот перетаскиватель с помощью jQuery. Красный X, как предполагается, удаляет элемент по щелчку, исчезая родительский div. Он работает, когда элемент находится в сером поле справа, но после его удаления функция удаления больше не работает. Как мне сделать это для элементов, которые были перемещены в поля слева? Спасибо. 

$(document).ready(function(){    
$('.draggable').draggable({
revert: "invalid",
stack: ".draggable",
helper: 'clone'
})
$('.droppable').droppable({
accept: ".draggable",
drop: function (event, ui) {
    var droppable = $(this);
    var draggable = ui.draggable;
    // Move draggable into droppable
    draggable.clone().appendTo(droppable);
    //draggable.css({top: '5px', left: '5px'});
}
})

  $("a").click(function(event) {
  event.preventDefault();
  $(this).closest('div').fadeOut();
})
});

https://jsfiddle.net/te4Lqg3f/

1 Ответ

0 голосов
/ 06 июля 2018

вам нужно повторно применить прослушиватель событий, когда элемент отброшен, посмотрите на JS ниже. Я добавил функцию, которая удаляет прослушиватель событий и добавляет его снова. он вызывается каждый раз, когда вы бросаете что-то в область, которую можно бросить. 

       $(document).ready(function(){    
    $('.draggable').draggable({
        revert: "invalid",
        stack: ".draggable",
        helper: 'clone'
    })
    $('.droppable').droppable({
        accept: ".draggable",
        drop: function (event, ui) {
            var droppable = $(this);
            var draggable = ui.draggable;
            // Move draggable into droppable
            draggable.clone().appendTo(droppable);
            //draggable.css({top: '5px', left: '5px'});

           //fire event event listener reset
            reset_event_listeners();
        }
    })

            $("a").click(function(event) {
      event.preventDefault();
        $(this).closest('div').fadeOut();
    })
    });    

    function reset_event_listeners(){
       //remove event listener
        $("a").off();
//put it back event listener
        $("a").click(function(event) {
        event.preventDefault();
          $(this).closest('div').fadeOut();
      });

    }
...