我想拖放按钮和图像所有UI元素，然后在画布内再次拖动元素

我想拖动（按钮，divs，图像），然后滴入画布，然后再次在画布内拖动。它不仅可以正常工作（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()
  }
 });
 }

这是jsfiddle的链接，用于进一步说明

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

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/

update

通常，最好避免在某些事情上使用其他单击事件时使用可拖动和可解析的内容。

我建议创建一个可以用来拖动元素的包装器，然后在元素上调整大小。

考虑一下：

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事件，而不会干扰可拖动的点击事件，因为它只会在句柄上寻找。

然后将可重新分配的

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

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

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

.ui-resizable {
    background: red;
}

new_signature元素设置为拖动后具有位置：静态。它必须是绝对的。使用Twisty的版本，添加此行：取消：false遏制后："父"，和 new_signature.css（{位置：'absolute'}）;就在$（this）.append（new_signature）;

之前

它在我的测试中起作用。

相关内容

最新更新

热门标签：