Draggabilly not adding event to newly added element

Question

I'm using desandro draggabilly and I'm having a problem when inserting a new element. It seems that the event is not firing on the new element that was added.

Here's a jsfiddle.

Here's the code as well.

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

On the code below when I dragged div 1, on dragEnd it will insert div 2 that has a class of draggable then remove div 1. The problem here is that div 2 is not being draggable even though it has a class of draggable.

Guruprasad J Rao · Accepted Answer · 2015-09-22T07:04:46.140

2

You need to re-initialize it after prepending since it is added to DOM dynamically and event draggabilly will not be attached to it. So below will fix the issue:

$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

UPDATE

Now if you want to call dragend event to the element you add and keep on incrementing the number on dragend just keep a global variable say i and increment it everytime as below:

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

edited Sep 22 '15 at 07:04

answered Sep 22 '15 at 06:58

Guruprasad J Rao

29,410
14
101
200

Thanks! It's working but wouldn't there be any performance issue with that approach? Also, it just stops there.. What if I want to add 5 more boxes. Like for every swipe, it'll prepend another box. Like a card swipe. – basagabi Sep 22 '15 at 07:02
@user1781041 Updated answer.. Try the demo and let me know if thats what you are looking for? – Guruprasad J Rao Sep 22 '15 at 07:06
1

This is working great! Just as expected! Thanks so much!! – basagabi Sep 22 '15 at 07:08
Anytime.. Happy coding.. :) – Guruprasad J Rao Sep 22 '15 at 07:08

score 1 · Answer 2 · answered Sep 22 '15 at 07:04

You have to initialize every time on creation of your div and bind event then something as below -

$(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);
     }

LIVE http://jsfiddle.net/mailmerohit5/L9kgeu3f/

This is working great! Just as expected! Thanks so much!! – basagabi Sep 22 '15 at 07:08 — basagabi, Sep 22 '15 at 07:08

Draggabilly not adding event to newly added element

2 Answers2