jQuery UI resizable/draggable 可以用来单击并拖动新元素到 DOM 中吗？
Can jQuery UI resizable/draggable be used to click and drag a new element into the DOM?
我有一个页面，为了创建一个新的 resizable/draggble div 用户点击 canvas 上的任意位置，它出现在点击事件发生的地方旁边。
一旦新元素出现，用户就可以调整它的大小或拖动它。
更好的用户体验是允许用户按下 mousedown，将新 div 拖动到所需大小，然后 mouseup 完成创建。例如
我想要的
这就像在本网站上绘制矩形的工作方式：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 这样的事情？有人可以举个例子吗？
不，这不是 - 那是不可能的。
根据所提供的有限信息，您可以完成这项工作，只是可能不是您预期的那样。它不是 jQuery UI 的功能，但您可以利用各种工具来制作一些东西。
使用Selectable，您可以在Start 和Stop 捕获鼠标点。这可用于在矩形中为您提供 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 函数分开，以防您将所有 canvas 详细信息存储在某个地方并且稍后必须重新绘制 canvas 。如果您从数据库中提取维度而不是根据用户操作计算它们，那么将这些函数分开是有意义的。否则你可以将它们组合起来。
希望有所帮助。
我有一个页面，为了创建一个新的 resizable/draggble div 用户点击 canvas 上的任意位置，它出现在点击事件发生的地方旁边。
一旦新元素出现，用户就可以调整它的大小或拖动它。
更好的用户体验是允许用户按下 mousedown，将新 div 拖动到所需大小，然后 mouseup 完成创建。例如
我想要的
这就像在本网站上绘制矩形的工作方式：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 这样的事情？有人可以举个例子吗？
不，这不是 - 那是不可能的。
根据所提供的有限信息，您可以完成这项工作，只是可能不是您预期的那样。它不是 jQuery UI 的功能，但您可以利用各种工具来制作一些东西。
使用Selectable，您可以在Start 和Stop 捕获鼠标点。这可用于在矩形中为您提供 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 函数分开，以防您将所有 canvas 详细信息存储在某个地方并且稍后必须重新绘制 canvas 。如果您从数据库中提取维度而不是根据用户操作计算它们，那么将这些函数分开是有意义的。否则你可以将它们组合起来。
希望有所帮助。