Php 谷歌使用jquery绘制红色规则
我正在为我的一个客户开发自定义表单生成器,在这里我们可以使用jquery来拖动字段、调整大小、应用类似css的边框和对齐字段。我已经完成了拖动、调整大小和css,但其中一个主要要求是应用谷歌绘图红色规则,就像我们在谷歌绘图中所做的那样 我附上了一段视频和视频,以澄清什么是红色规则 视频: 从上面的屏幕投影中可以看出,当我们拖动/绘制一个字段并与其他字段重叠时,它会以红色突出显示拖动字段或重叠字段的垂直和水平中心,因此标题为红色规则。它还高亮显示与其他字段重叠或移出画布区域的任何字段的边界。它还显示在拖动时是否可以在另一个字段中内接字段 我正在寻找一些人谁可以指导我在正确的方向,以获得这个功能。我需要应用这个红色规则效果,而不是绘画或任何东西。请告诉客人任何可能性 非常感谢您的帮助。我得到了解决方案 你可以检查她Php 谷歌使用jquery绘制红色规则,php,jquery,drawing,Php,Jquery,Drawing,我正在为我的一个客户开发自定义表单生成器,在这里我们可以使用jquery来拖动字段、调整大小、应用类似css的边框和对齐字段。我已经完成了拖动、调整大小和css,但其中一个主要要求是应用谷歌绘图红色规则,就像我们在谷歌绘图中所做的那样 我附上了一段视频和视频,以澄清什么是红色规则 视频: 从上面的屏幕投影中可以看出,当我们拖动/绘制一个字段并与其他字段重叠时,它会以红色突出显示拖动字段或重叠字段的垂直和水平中心,因此标题为红色规则。它还高亮显示与其他字段重叠或移出画布区域的任何字段的边界。它还显
$.ui.plugin.add("draggable", "smartguides", {
start: function(event, ui) {
var i = $(this).data("draggable"), o = i.options;
i.elements = [];
$(o.smartguides.constructor != String ? ( o.smartguides.items || ':data(draggable)' ) : o.smartguides).each(function() {
var $t = $(this); var $o = $t.offset();
if(this != i.element[0]) i.elements.push({
item: this,
width: $t.outerWidth(), height: $t.outerHeight(),
top: $o.top, left: $o.left
});
});
},
stop: function(event, ui) {
$(".objectx").css({"display":"none"});
$(".objecty").css({"display":"none"});
},
drag: function(event, ui) {
var inst = $(this).data("draggable"), o = inst.options;
var d = o.tolerance;
$(".objectx").css({"display":"none"});
$(".objecty").css({"display":"none"});
var x1 = ui.offset.left, x2 = x1 + inst.helperProportions.width,
y1 = ui.offset.top, y2 = y1 + inst.helperProportions.height,
xc = (x1 + x2) / 2, yc = (y1 + y2) / 2;
for (var i = inst.elements.length - 1; i >= 0; i--){
var l = inst.elements[i].left, r = l + inst.elements[i].width,
t = inst.elements[i].top, b = t + inst.elements[i].height,
hc = (l + r) / 2, vc = (t + b) / 2;
var ls = Math.abs(l - x2) <= d;
var rs = Math.abs(r - x1) <= d;
var ts = Math.abs(t - y2) <= d;
var bs = Math.abs(b - y1) <= d;
var hs = Math.abs(hc - xc) <= d;
var vs = Math.abs(vc - yc) <= d;
if(ls) {
ui.position.left = inst._convertPositionTo("relative", { top: 0, left: l - inst.helperProportions.width }).left - inst.margins.left;
$(".objectx").css({"left":l-d-4,"display":"block"});
}
if(rs) {
ui.position.left = inst._convertPositionTo("relative", { top: 0, left: r }).left - inst.margins.left;
$(".objectx").css({"left":r-d-4,"display":"block"});
}
if(ts) {
ui.position.top = inst._convertPositionTo("relative", { top: t - inst.helperProportions.height, left: 0 }).top - inst.margins.top;
$(".objecty").css({"top":t-d-4,"display":"block"});
}
if(bs) {
ui.position.top = inst._convertPositionTo("relative", { top: b, left: 0 }).top - inst.margins.top;
$(".objecty").css({"top":b-d-4,"display":"block"});
}
if(hs) {
ui.position.left = inst._convertPositionTo("relative", { top: 0, left: hc - inst.helperProportions.width/2 }).left - inst.margins.left;
$(".objectx").css({"left":hc-d-4,"display":"block"});
}
if(vs) {
ui.position.top = inst._convertPositionTo("relative", { top: vc - inst.helperProportions.height/2, left: 0 }).top - inst.margins.top;
$(".objecty").css({"top":vc-d-4,"display":"block"});
}
};
}
});
$('.other-objects').draggable({
containment: 'parent',
smartguides:".other-objects",
tolerance:5
});
#parent{
width:600px;
height:500px;
border:1px solid #000;
position:relative;
}
.other-objects{
background:#aaa;
width:100px;
height:100px;
display:block;
position:relative;
left:140px;
top:50px;
}
.objectx{
display:none;
//background:#fff;
width:0px;
height:100%;
position:absolute;
top:0px;
left:10px;
border-left: 2px solid red;
}
.objecty{
display:none;
//background:#fff;
width:100%;
height:0px;
position:absolute;
top:10px;
left:0px;
border-bottom: 2px solid red;
}