jQuery UI Draggable and Resizable stop working after 1 click

Question

I have a fiddle here: https://jsfiddle.net/dfaunce/L3j1qmpu/5/

If you click on any of the item boxes, it will drop that box into the container (the white space on the right). The goal is to make the boxes in the container both draggable and resizable.

The jQuery UI resizable handle shows up in the box, but it does nothing.
You can only drag the item once. After that the box does nothing.

What am I doing wrong here?

$(function() {
    var $container = $("#container"),
        $objects = $("#objects");

    $(".box-selectable").on("click", function() {
        var $g = $(this).clone(true, true);
            $g
              .removeClass("box-selectable")
              .addClass("draggable resizable")
              .appendTo($container)
              .resizable()
              .draggable();
  
        $(this).remove();    
    });  
});

You need to use a delegated event handler as you're adding/removing the class the event handlers are bound to at runtime — Rory McCrossan, Apr 27 '21 at 14:03

score 0 · Answer 1 · answered Apr 27 '21 at 13:33

0

Alright so I figured it out....

If I changed the method to:

$(document).on("click", ".box-selectable", function() { .... `

everything works.

I don't know why but it does...

answered Apr 27 '21 at 13:33

bagofmilk

1,492
8
34
69

jQuery UI Draggable and Resizable stop working after 1 click

1 Answers1