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

Posted 2023-05-08

【中文标题】Draggabilly 不向新添加的元素添加事件

【英文标题】：Draggabilly not adding event to newly added element

【发布时间】：2015-12-19 00:53:43

【问题描述】：

我正在使用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。

【参考方案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

【讨论】：

谢谢！它正在工作，但这种方法不会有任何性能问题吗？此外，它就停在那里。如果我想再添加 5 个盒子怎么办。就像每次滑动一样，它会在另一个框之前添加。就像刷卡一样。

@user1781041 更新的答案.. 试试演示，让我知道这是否是您要找的？

这很好用！正如预期的那样！非常感谢！！

任何时候..快乐编码..:)

【参考方案2】：

您必须在每次创建 div 并绑定事件时进行初始化 如下 -

$(document).ready(function () 
    $.bridget('draggabilly', Draggabilly);
    var $draggable = $('.draggable').draggabilly(
        axis: 'x'
    );

    $draggable.on('dragEnd', callback);    

);
var co=2;
function callback(e, p) 
        $(this).parent().prepend('<div class="box draggable">'+co++ +'</div>');
        $(this).prev().addClass('draggable')
        $(this).remove();
        $(".draggable").draggabilly(
        axis: 'x'
        );
         $(".draggable").on('dragEnd', callback);
     

直播 http://jsfiddle.net/mailmerohit5/L9kgeu3f/

【讨论】：

这很好用！正如预期的那样！非常感谢！！