Question

我正在使用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'
    }
  });
});

Answer 1

笔 - http://codepen.io/mikethedj4/pen/snjpF
小提琴 - http://jsfiddle.net/umk8s/1/

我最终使用ThreeDubMedia's拖动插件来调整我想要的大小调整效果注意：我仍然使用全局变量来保存我的状态。

我遇到的最初问题是当元素使用ThreeDubMedia's拖动插件进行可拖动/可调整大小时我无法使用contenteditable编辑它们（它设置为true但脚本不允许任何编辑）。为了使它可编辑我必须基本上刷新HTML。我使用下面的脚本做到了这一点......

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

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

1 个答案: