Question

I have dropped an element from a widget and drag it in the target. Like this:

  jQuery('.ui-layout-center').droppable({
    activeClass: 'ui-state-hover',
    accept:  '.item-art',
    revert: true,
    drop:  function (event, ui) {
      var $canvas = jQuery(this);
      if(!ui.draggable.hasClass('canvas-element')) {
        var $canvasElement = ui.draggable.clone();
        $canvasElement.addClass('canvas-element');
        $canvasElement.html('<div><TEXTAREA COLS=2 ROWS=1></TEXTAREA></div>');
        $canvas.append($canvasElement);
        $canvasElement.css({
          left: (ui.position.left - $canvas.offset().left),
          top: (ui.position.top - $canvas.offset().top),
          position: 'absolute'
        });
        $canvasElement.draggable({
          cursor: 'move'
        });

After dropped the item (div) should be resizable. For that I used resizable in line $canvasElement.draggable like this:

$canvasElement.resizable().draggable({
cursor: ‘move’
});

But still it’s not working. User can’t resize the dropped div. Please help me.

Answer 1

Add the statement $canvasElement.resizable(); before $canvas.append($canvasElement);