Question

我使用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/

Answer 1

删除该项目后，您需要重新应用事件侦听器，请查看下面的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();
      });

    }

拖放对象后，功能不起作用

1 个答案: