附加后选定元素上的JQuery UI可调整大小的处理程序

小提琴-

我正在使用JQuery UI构建一个实验性的网站设计师。
元素通过拖放方式添加到画布中，如下所示

$('.navbar *').draggable({
  //  use a helper-clone that is append to 'body' so is not 'contained' by a pane
  helper: function() {
    return $(this).clone().appendTo('.canvas').css({
      'zIndex': 5
    }).show();
  },
  cursor: 'move',
  containment: "document"
});
$('.canvas, .canvas *').droppable({
  activeClass: 'ui-state-hover',
  accept: '.navbar *',
  drop: function(event, ui) { 
    if (!ui.draggable.hasClass("dropped"))
      $(this).append($(ui.draggable).clone().removeClass("ui-draggable").removeClass("dropped"));
  }
}).sortable({
  placeholder: 'sort-placer',
  cursor: 'move',
  helper: function (evt, ui) {
    return $(ui).clone().appendTo('.canvas').show();
  }
});

但是，我目前的问题在于调整元素的大小。（也可以在画布元素的容器上附加。我不是在这个问题上寻求帮助）
我试图只在所选元素上显示调整大小处理程序，但这一直是我的问题。我一直很难让它工作

非常感谢您的帮助

$('.canvas *').on('mousedown touchstart', function() {
  $('.canvas *').remove('#nwgrip, #negrip, #swgrip, #segrip, #ngrip, #egrip, #sgrip, #wgrip');
  $(this).append('<div class="ui-resizable-handle ui-resizable-nw" id="nwgrip"></div> <div class="ui-resizable-handle ui-resizable-ne" id="negrip"></div> <div class="ui-resizable-handle ui-resizable-sw" id="swgrip"></div> <div class="ui-resizable-handle ui-resizable-se" id="segrip"></div> <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div> <div class="ui-resizable-handle ui-resizable-e" id="egrip"></div> <div class="ui-resizable-handle ui-resizable-s" id="sgrip"></div> <div class="ui-resizable-handle ui-resizable-w" id="wgrip"></div>');

  $(this).resizable({
    handles: {
      'ne': '#negrip',
      'se': '#segrip',
      'sw': '#swgrip',
      'nw': '#nwgrip',
      'n': '#ngrip',
      'e': '#egrip',
      's': '#sgrip',
      'w': '#wgrip'
    }
  });
});

$（'.canvas*）.on（'mousedown touchstart'，function（）{
$（'.canvas*'）。移除（'#nwrip，#negrip，#swgrip，#segrip，#ngrip，#egrip，#sgrip，#wgrip'）；
$（此）。附加（“”）；
$（此）。可调整大小({
处理：{
“ne”：“negrip”，
‘se’：‘segrip’，
‘sw’：‘swgrip’，
“nw”：“nwgrip”，
‘n’：‘ngrip’，
“e”：“egrip”，
‘s’：‘sgrip’，
“w”：“wgrip”
}
});
});

笔-
小提琴-

我最终使用了拖动插件来实现我想要的缩放效果。
注意：我仍在使用全局变量保存状态

我遇到的最初问题是，当元素可以通过拖动插件拖动/调整大小时，我无法使用contenteditable编辑它们（设置为true，但脚本不允许任何编辑）。为了使其可编辑，我必须基本上刷新html。我是用下面的脚本做的

$(".code").val( $(".workflow").html() );
$(".workflow").html( $(".code").val() );