[英]jQuery UI draggable: position in grid after drop
Using grid: [90, 83]
when binding makes the element only move in the grid specified. 使用
grid: [90, 83]
绑定时使元素仅在指定的网格中移动。 I am attempting to make it move free (as it has no grid
set) and then, when the user stops dragging the element, position it in a gird. 我试图使其自由移动(因为它没有设置
grid
),然后,当用户停止拖动元素时,将其放置在网格中。
For example, on your Android smartphone, when you re-order the icons on the home screen, you can drag them wherever you like and after you release they stick to a grid. 例如,在您的Android智能手机上,当您对主屏幕上的图标重新排序时,您可以将它们拖动到任意位置,并在释放后将它们固定在网格上。
So far I tried the following JS code: 到目前为止,我尝试了以下JS代码:
$(".home-item.desktop-icon:last-child").draggable({
//grid: [90, 83],
containment: "parent",
stop: function (event, ui) {
y = ui.position.top,
x = ui.position.left,
_this = this;
if ((x - 10)%83 >= 42) {
posX(x-(x%83) + 93);
}
else {
posX(x-(x%83) + 10);
}
if ((y - 10)%90 >= 45) {
posY(y-(y%90) + 100);
}
else {
posX(y-(y%90) + 10);
}
function posX (f) {
$(_this).css("top", f + "px");
}
function posY (f) {
$(_this).css("left", y + "px");
}
}
});
No idea why, however, this did not work at all. 不知道为什么,这根本不起作用。 What should I do?
我该怎么办?
Here is an example based on my comment. 这是基于我的评论的示例。
$(function() { $(".draggable").draggable({ containment: "parent" }); $("#snaptarget").droppable({ accept: ".draggable", drop: function(e, ui) { var cPPos = ui.position; var cOPos = ui.offset; var cPosOff = { top: Math.round(cOPos.top) % 90, left: Math.round(cOPos.left) % 83 }; var sPos = { top: Math.round(cOPos.top), left: Math.round(cOPos.left) }; console.log("Dropped", cPPos, cOPos, cPosOff, sPos); var $item = ui.draggable; if (cPosOff.top > 0 && cPosOff.top < 70) { sPos.top = sPos.top - cPosOff.top; console.log("DROP - TOP: " + cOPos.top + " lower to " + sPos.top); } else { sPos.top = sPos.top + (90 - cPosOff.top); console.log("DROP - TOP: " + cOPos.top + " rise to " + sPos.top); } if (cPosOff.left > 0 && cPosOff.left < 61) { sPos.left = sPos.left - cPosOff.left; console.log("DROP - LEFT: " + cOPos.left + " left to " + sPos.left); } else { sPos.left = sPos.left + (83 - cPosOff.left); console.log("DROP - LEFT: " + cOPos.left + " right to " + sPos.left); } $item.appendTo($(this)).css({ margin: 0, position: "absolute", top: sPos.top + "px", left: sPos.left + "px" }); } }); });
.drag-area { min-height: 300px; } .draggable { width: 80px; height: 80px; display: inline-block; margin: 0 10px 10px 0; font-size: .9em; } .ui-widget-header p, .ui-widget-content p { margin: 0; } #snaptarget { height: 173px; position: relative; }
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="drag-area"> <div id="snaptarget" class="ui-widget-header"> </div> <br style="clear:both"> <div id="draggable" class="draggable ui-widget-content"> <p>A</p> </div> <div id="draggable2" class="draggable ui-widget-content"> <p>B</p> </div> <div id="draggable3" class="draggable ui-widget-content"> <p>C</p> </div> <div id="draggable4" class="draggable ui-widget-content"> <p>D</p> </div> <div id="draggable5" class="draggable ui-widget-content"> <p>E</p> </div> </div>
I left things a little un cleaned up so you get a little more feedback in Console. 我还没有整理一些东西,因此您可以在Console中获得更多反馈。 When dragging, you want a more full range of motion, but when the user drops the item, you want it to snap into a position.
拖动时,您需要更完整的运动范围,但是当用户放下该项目时,您希望它捕捉到一个位置。
Initially, I was going for a 50% tolerance and found this was too greedy, so I shot for about a 75% tolerance. 最初,我打算忍受50%的容忍度,但发现这太贪婪了,因此我拍摄的忍耐度约为75%。 For example, if the user drops the item and it has a
top,left
of {12, 140}
you may want it to snap to {0,83}
. 例如,如果用户放下项目,它有一个
top,left
的{12, 140}
你可能希望它捕捉到{0,83}
If the user is lazy or does not know it will snap, they may drag it close, with the intention of hitting the next target, my code will have a ~25% tolerance for the next block to the right. 如果用户懒惰或不知道它会卡住,则可以将其拖到关闭位置,以达到下一个目标,我的代码将对右侧的下一个块具有约25%的容差。 So if they drop at
{12,164}
, it will slide to the right block that is closer {0,166}
. 因此,如果它们落在
{12,164}
,它将滑动到更靠近{0,166}
的右侧块。
Hope that helps. 希望能有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.