CODEWITHSUNDEEP
javascriptjqueryeventscloning
Ionuț Staicu
Ionuț Staicu

Reputation: 22174

How to clone touchevents with jQuery?

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!

Upvotes: 1

Views: 84

Answers (1)

pimvdb
pimvdb

Reputation: 154848

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

Upvotes: 1

Related Questions