javascript - Draggabilly 不向新添加的元素添加事件

Question

我正在使用 desandro draggabilly我在插入新元素时遇到问题。该事件似乎没有在添加的新元素上触发。

这是一个 jsfiddle .

这也是代码。

HTML

<div class="box draggable">1</div>

CSS

.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: block;
}

JQUERY

$(document).ready(function () {
    $.bridget('draggabilly', Draggabilly);
    var $draggable = $('.draggable').draggabilly({
        axis: 'x'
    });
    $draggable.on('dragEnd', function(e, p) {
        $(this).parent().prepend('<div class="box draggable">2</div>');
        $(this).prev().addClass('draggable')
        $(this).remove();
    }); 
});

在下面的代码中，当我拖动 div 1 时，在 dragEnd 上，它将插入具有类 draggable 的 div 2，然后删除 div 1。这里的问题是div 2 不可拖动，即使它有一个 draggable 类。

Answer 1

您需要在prepending 之后重新初始化它，因为它是动态添加到DOM 并且event draggabilly 不会附加到它。所以下面将解决这个问题:

$draggable.on('dragEnd', function(e, p) {
        $(this).parent().prepend('<div class="box draggable">2</div>');
        $('.draggable').draggabilly({
            axis: 'x'
        }); //re-initialize again
        $(this).remove();
});

DEMO

---

更新

现在，如果你想调用 dragend 事件到你添加的元素，并继续增加 dragend 上的数字，只需保留一个全局变量，比如 i 并每次递增它如下:

var i=1; //global variable
$(document).ready(function () {
    $.bridget('draggabilly', Draggabilly);
    $('.draggable').draggabilly({
        axis: 'x'
    });

    $(document).on('dragEnd','.draggable', function(e, p) {
        i++; //increment it
        $(this).parent().prepend('<div class="box draggable">'+i+'</div>'); 
        //display text as i
        $('.draggable').draggabilly({
            axis: 'x'
        });
        $(this).remove();//remove previous one
    });    
});

Updated demo