Jquery UI: Draggable drag event not working

Question

I'm trying to fire the "drag" on a draggable() but nothing happens when I drag it? This my code:

  $('.agenda-cloned-object').draggable({
   drag: function( event, ui ) {},
   cursor: "move",
   revert: "invalid",
  });

  $( ".agenda-cloned-object" ).on( "drag", function( event, ui ) { console.log("TEST") } );

Edit: Appearantly the drag event does not work on a cloned draggable, is there any fix for this?

`.on()` binds an event handler. To *fire* the event programatically, use `.trigger()` — blgt, Mar 14 '16 at 11:33
I have no errors and there is no other code next to a droppable. — RayShawnOfNapalm, Mar 14 '16 at 12:12
Maybe the `draggable` plugin doesn't fire the `drag` event? Also, why not use the `drag` callback? — evolutionxbox, Mar 14 '16 at 14:00
Right. Cloned elements don't keep their originals event bindings. Take a look at this answer (http://stackoverflow.com/a/9549716/989920) — evolutionxbox, Mar 14 '16 at 15:07

score 0 · Answer 1 · answered Sep 27 '17 at 08:42

I can see the event being fired in Chrome v60 on OSX: https://jsfiddle.net/tb061q8o/

The class name "clone" implies your original code was more complicated. I encourage you to try and boil the problem down to a minimum possible reproduce and share it in JsFiddle.

Also, you are declaring the event handler twice. You could just do this:

$('.agenda-cloned-object').draggable({
   drag: function( event, ui ) { console.log("TEST") },
   cursor: "move",
   revert: "invalid",
});

Jquery UI: Draggable drag event not working

1 Answers1