Question

我想拖动（按钮，div，图像）并放到画布上，然后再在画布内拖动。它不能正常工作（divs）我可以拖放并再次开始拖动画布而不是按钮和其他元素

感谢

$(init);
function init() {
var diagram = [];
var canvas = $(".canvas");




$(".tool").draggable({
  helper: "clone",
  //cursor: "move",
  cancel: false,
   });
  canvas.droppable({
  drop: function(event, ui) {
    console.log(ui.helper.prop("outerHTML"))

    var new_signature = ui.helper.is('.ui-resizable') ?
        ui.helper
      :
        $(ui.helper).clone().removeClass('tool ui-draggable ui-draggable-
       handle ui-draggable-dragging');
    $(this).append(new_signature);
    new_signature.draggable({
      helper: false
    }).resizable()

  }
 });

 }

this is a link of jsfiddle for further explanation

Answer 1

实际上，它有效。检查小提琴中元素的背景颜色：

https://jsfiddle.net/jakecigar/wngwsxw2/9/

.ui-resizable {
    background: red;
}

Answer 2

您可能需要考虑的一些小修正。

<强>的JavaScript

function init() {
  var diagram = [];
  var canvas = $(".canvas");
  $(".tool").draggable({
    helper: "clone",
    cancel: false,
  });
  canvas.droppable({
    drop: function(event, ui) {
      console.log(ui.helper.prop("outerHTML"));
      var new_signature;
      if (ui.helper.is('.ui-resizable')) {
        new_signature = ui.helper;
      } else {
        new_signature = ui.helper.clone();
        new_signature.removeClass("ui-draggable ui-draggable-handle ui-draggable-dragging");
        new_signature.draggable({
          helper: false,
          containment: "parent"
        }).resizable();
      }
      $(this).append(new_signature);
    }
  });
}

$(init);

小提琴：https://jsfiddle.net/Twisty/0gLh2h6o/

<强>更新

通常情况下，当有其他Click事件需要处理时，最好避免在某些事情上使用可拖动和可调整大小。

我建议创建一个包装器和句柄，用于拖动元素，然后调整元素大小。

考虑一下：

<强> HTML

<div style="width:20%;float:left;border:1px solid; height:400px">
  <h6>buttons</h6>
  <div>
    <div class="fake tool button tool-1">Click</div>
    <br/>
    <div class="fake tool button tool-2">Click</div>
    <hr />
  </div>
</div>
<div style="width:78%;height:400px;float:right;border:1px solid;" class="canvas">
  <p>
    canvas
  </p>

</div>
note:i want to drag these button multiple time and once it dopped inside canvas it can be draggable inside canvas and resizable

<强> CSS

.tool-1,
.tool-2 {
  width: 60px;
  height: 1.5em;
  border: 1px red solid;
  border-radius: .2em;
  text-align: center;
  padding: 0.5em;
}

.tool-2 {
  border: 1px green solid;
}

.canvas .tool_wrapper {
  display: inline-block;
  width: auto;
  height: auto;
}

.canvas .tool_wrapper .tool_handle {
  height: 10px;
  line-height: 10px;
  padding: 0;
  margin: 0;
  text-align: right;
}

.canvas .tool_wrapper .tool_handle .ui-icon {
  margin-top: -.30em;
}

.canvas .tool_wrapper .ui-resizable-se {
  margin-left: -5px;
  margin-top: -5px;
}

.canvas .tool_wrapper .button {
  width: 60px;
  height: 1.5em;
  border-radius: .2em;
  text-align: center;
  padding: 0.5em;
}

<强>的JavaScript

function init() {
  var diagram = [];
  var canvas = $(".canvas");
  $(".tool").draggable({
    helper: "clone",
    cancel: false,
  });
  canvas.droppable({
    drop: function(event, ui) {
      console.log(ui.helper.attr("class"));
      if (ui.helper.hasClass("fake")) {
        var new_signature;
        if (ui.helper.hasClass("button")) {
          new_signature = $("<div>", {
            class: "tool_wrapper ui-widget",
            style: ui.helper.attr("style")
          });
          new_signature.css("top", (parseInt(new_signature.css("top").substr(0, -2)) - 10) + "px")
          var handle = $("<div>", {
              class: "tool_handle ui-widget-header"
            })
            .html("&nbsp;").appendTo(new_signature);
          var close = $("<span>", {
            class: "ui-icon ui-icon-close"
          }).appendTo(handle).click(function() {
            if (confirm("Are you sure you want to remove this Button?")) {
              new_signature.remove();
            }
          });
          var tool = $("<div>", {
              class: ui.helper.attr("class"),
              contenteditable: true
            })
            .html(ui.helper.html())
            .appendTo(new_signature).resizable();
          tool.css({
            width: "60px",
            height: "1.5em",
            "line-height": "inherit"
          });
          tool.removeClass("fake ui-draggable ui-draggable-handle ui-draggable-dragging");
        }
        new_signature.appendTo($(this));
        new_signature.draggable({
          handle: ".tool_handle",
          helper: false,
          containment: "parent"
        })
      }
    }
  });
}

$(init);

在这里，我们创建一个div包装器并创建一个带有关闭按钮的句柄，用于移动元素。这成为我们的可拖动对象，我们可以在其中放置button，div或img。这允许contenteditable接收它自己的cl; ick事件，而不会干扰draggable期望的click事件，因为它只会在句柄上查找。

然后将Resizable分配给元素本身，以确保我们更改它的大小而不仅仅是包装器的大小。

Answer 3

new_signature元素在设置为draggable后具有position：static。它必须是绝对的。使用Twisty的版本，添加以下行：取消：false 收容后：＆＃34;父母＆＃34;，和 new_signature.css（{position：＆＃39; absolute＆＃39;}）; 就在$（this）.append（new_signature）;

之前

它在我的测试中起作用。

我想拖放按钮和图像所有ui元素并再次拖动画布内的元素

3 个答案: