javascript - 我想拖放所有 ui 元素的按钮和图像，然后再次拖动 Canvas 内的元素

Question

我想将(按钮、div、图像)拖放到 Canvas 上，然后在 Canvas 内再次拖动。它仅无法正常工作(divs)我可以拖放并再次开始在 Canvas 内拖动而不是在按钮和其他元素上

谢谢

$(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

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

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);

fiddle :https://jsfiddle.net/Twisty/0gLh2h6o/

---

更新

通常，最好避免在某些事物上使用 draggable 和 resizable，因为此时还有其他 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 接收它自己的 click 事件，而不干扰 draggable 期望的点击事件，因为它只会在 handle 上寻找。

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