我想拖放按鈕並為所有ui元素圖像，然后再次拖動畫布中的元素

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

  }
 });

 }

這是jsfiddle的鏈接，用於進一步說明

Answer 1

實際上，它有效。 檢查小提琴中a元素的背景色：

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事件，而不會干擾可拖動對象期望的click事件，因為它只會在手柄上尋找它。

然后將Resizable分配給元素本身，以確保我們更改其大小，而不僅僅是更改包裝器的大小。

Answer 3

將new_signature元素設置為可拖動后，其位置為：static。 它必須是絕對的。 使用Twisty的版本，添加以下行：cancel：包含后為false：“ parent”，和new_signature.css（{position：'absolute'}）; 就在$（this）.append（new_signature）;之前；

它在我的測試中有效。