How to clone touchevents with jQuery?

Question

I kind of need some help with clone() in jQuery.

So, the thing is this: I'm doing some kind of drag&drop&sort that will work on touch devices. Everything is good except that when i clone an element, the events are gone (drag stop working).

The code looks like this (over simplified):

$('li', layers).each(function(){
    this.addEventListener('touchend', function(e){
        var cloned = $(this).clone( true, true ); // no events are cloned at all!
        cloned.insertBefore( this.helper ); 

    }); //ontouchend

    this.addEventListener('touchmove', function(e){
        // do some stuff with this.helper
    });
});

What do i do wrong?

Thanks!

Answer 1

Since a DOM element is one thing (and not automatically cloned), using a function like insertBefore will move the element instead of copying it. If you make use of this 'trick', you also don't have trouble with events not being cloned because it's the very same element with everything bound.

So you could do e.g.:

this.addEventListener('touchend', function(e){
    this.insertBefore( this.helper ); 
}); //ontouchend