可以使用 jQuery UI 可调整大小/可拖动来单击并将新元素拖动到 DOM 中吗？

Question

我有一个页面，为了创建一个新的可调整大小/可拖动的div，用户单击画布上的任意位置，它会出现在单击事件发生的位置旁边。

一旦新元素出现，用户就可以调整大小或拖动它。

更好的用户体验是允许用户按下鼠标，将新的div 拖动到所需的大小，然后鼠标向上完成创建。例如

我想要什么

这就像在这个网站上绘制矩形的工作原理：https://awwapp.com/

我有什么

您会看到，当检测到拖动时，我的代码只是附加了新的div。然后用户必须返回并调整大小。

在研究使用 jQuery 检测拖动时，我一般没有发现太多，apart from this 但即使这个示例在我需要单击和拖动时也是非常多的单击或拖动。

为了简洁起见，我的代码目前是：

function newPlaceholderPosition(posX, posY, X, Y) {
    cssTop = (Y - posY);
    cssLeft = (X - posX);

    var styles = [
        "top: "+ Math.round(cssTop / 10) * 10 +"px;",
        "left: "+ Math.round(cssLeft / 10) * 10 +"px;"
    ].join(' ');

    return styles.toString();
}

function makePlaceholdersFunctional(elements) {
    elements.resizable({
        containment: "parent",
        handles: 'ne, se, sw, nw',
        minWidth: 100,
        minHeight: 40,
        autoHide: true,
    });

    elements.draggable({
        containment: "parent",
        drag: function() {
            $("body").addClass("element-moving");
        },
        stop: function() {
            $("body").removeClass("element-moving");    
        }
    });
}

var isDragging = false;

$(".canvas")
.mousedown(function(e) {
    isDragging = false;
    // Log where the click took place
    clickLocation = newPlaceholderPosition($(this).offset().left, $(this).offset().top, e.pageX, e.pageY);
})
.mousemove(function(e) {
    // If the user is not dragging an existing div
    if(!$('.canvas').hasClass("child-active")) {
        isDragging = true;  
    }
})
.mouseup(function() {
    var wasDragging = isDragging;
    isDragging = false;
    if (!wasDragging) {
        // console.log("You weren't dragging on the canvas")
    } else {
        // console.log("You WERE dragging on the canvas")
        $(".canvas").append('<div class="resizable" data-id="' + parseInt( $(".resizable").length + 1) + '" style="'+ clickLocation +'"></div>');
        makePlaceholdersFunctional($(".resizable:last"));
    }
});

使用 jQuery UI 可以实现这样的事情吗？有人可以举个例子吗？

Answer 1

根据提供的有限信息，您可以完成这项工作，但可能不是您预期的方式。它不是 jQuery UI 的特性，但您可以利用各种工具来制作一些东西。

使用 Selectable，您可以在开始和停止时捕获鼠标点。这可用于在矩形中为您提供 2 个点。它不需要播放任何元素，然后动态地创建可拖动和调整大小的元素。

示例： https://jsfiddle.net/Twisty/42zeudf6/16/

JavaScript

$(function() {
  var toolFunction = null;
  var action = null;

  function calcBoxDim(x1, y1, x2, y2) {
    var dim = {};
    dim.width = x2 - x1;
    dim.height = y2 - y1;
    dim.top = y1;
    dim.left = x1;
    dim.right = x2;
    dim.bottom = y2;
    dim.center = [x1 + (dim.width / 2), y1 + (dim.height / 2)];
    return dim;
  }

  function makeCanvasDrag($o) {
    $o.draggable({
      containment: $(".canvas")
    });
  }

  function makeCanvasResize($o) {
    $o.resizable({
      containment: $(".canvas")
    });
  }

  function makeRect(x1, y1, x2, y2, ev) {
    var box = calcBoxDim(x1, y1, x2, y2);
    var rect = $("<div>", {
      id: "rect-" + ($(".canvas .rectangle").length + 1),
      class: "draw rectangle move resize"
    }).appendTo($(".canvas")).css({
      width: box.width + "px",
      height: box.height + "px",
      top: (box.top - $(".canvas").offset().top) + "px",
      left: (box.left - $(".canvas").offset().left) + "px",
      position: "absolute"
    });
    return rect;
  }
  $(".tools button").button({
    showLabel: false,
    icon: "none"
  });
  $(".rect").button("option", "icon", "far fa-square").click(function() {
    toolFunction = "rect";
    action = "draw";
    $(".canvas").selectable({
      start: function(e) {
        $(".canvas").data("drawRectMouseDown", e);
      },
      stop: function(e) {
        var down = $(".canvas").data("drawRectMouseDown");
        var up = e;
        makeRect(down.pageX, down.pageY, up.pageX, up.pageY, e);
        makeCanvasDrag($(".canvas .move"));
        makeCanvasResize($(".canvas .resize"));
        toolFunction = null;
        action = null;
      }
    });
  });
  $(".select").button("option", "icon", "fas fa-mouse-pointer")
});

此示例使用 FontAwesome，但您可以使用 jQuery UI 图标或您自己的图形。

我怀疑你最终会制作很多与按钮和事件相关的功能。然后工具按钮会填充全局变量，让用户可以在工作区中使用这些工具。

我们有一个基于 2 个点计算尺寸的函数。然后我们有另一个函数可以根据这些尺寸制作矩形。我添加了很多尺寸，以防您需要将此功能用于其他形状。我将它与 maker 函数分开，以防您将所有画布细节存储在某个地方并且必须稍后重新绘制画布。如果您从数据库中提取维度而不是从用户操作中计算它们，那么将这些函数分开是有意义的。否则，您可以将它们组合起来。

希望有所帮助。

Answer 2

不，不是——那是不可能的。