让 jQuery 可拖动以捕捉到特定网格
Posted
技术标签:
【中文标题】让 jQuery 可拖动以捕捉到特定网格【英文标题】:Getting jQuery draggable to snap to specific grid 【发布时间】:2014-01-08 20:25:02 【问题描述】:(注意: 有些人提出了类似的问题,但过于具体,没有得到可用的答案)
jQuery UI 的可拖动小部件具有捕捉到网格的选项,但无法设置网格相对于什么。
例如,我们在放置目标中有一个明确定义的 20x20 网格。在放置目标内从 0,0 开始的拖动项目将与网格对齐。但从不同位置或放置目标外部开始的拖动项目不会与该网格对齐。
http://jsfiddle.net/FNhFX/5/
HTML:
<div class="drop-target">
<div class="drag-item">Drag me</div>
<div class="drag-item" style="left:87px;top:87px;">Drag me</div>
</div>
<div class="outside-drag-item">Drag me</div>
JS:
$(function()
$(".drag-item").draggable(
grid: [20, 20]
);
$(".outside-drag-item").draggable(
grid: [20, 20],
helper:"clone"
);
$(".drop-target").droppable(
accept: ".drag-item"
);
);
是否有任何方法可以使用 jQuery draggable 捕捉到特定网格?
【问题讨论】:
我认为你需要为外部拖动项设置 helper:"original",bcaz 克隆选项使克隆可以拖动并且原始保持在同一个地方。 @Neha- 这没什么区别:jsfiddle.net/FNhFX/7 您能否详细说明一下我认为外部的“拖动我”div 行为不是在网格内拖动。 【参考方案1】:尽管我是通过a followup question you asked 来到这里的,但我也会继续在这里发布答案。
您可以在可拖动的 jQuery UI 上的 drag
事件中非常轻松地创建自己的对齐网格功能。
基本上,您想检查当前 ui 位置在可拖动对象被拖动到网格的任何点的距离。这种接近度总是可以表示为位置除以网格的剩余部分。如果该余数小于或等于 snapTolerance,则只需将位置设置为没有该余数的位置。
用散文说这很奇怪。在代码中应该更清楚:
Live Demo
// Custom grid
$('#box-3').draggable(
drag: function( event, ui )
var snapTolerance = $(this).draggable('option', 'snapTolerance');
var topRemainder = ui.position.top % 20;
var leftRemainder = ui.position.left % 20;
if (topRemainder <= snapTolerance)
ui.position.top = ui.position.top - topRemainder;
if (leftRemainder <= snapTolerance)
ui.position.left = ui.position.left - leftRemainder;
);
【讨论】:
Nate to the rescue-用一个很棒的解决方案解决了我的两个问题。再次感谢! Spot on ... 是一种享受 - 将 % 20 替换为 % gridWidth 和 % gridHeight。【参考方案2】:作为尝试在 jQuery UI 中使用 grid 选项的替代方法,我创建了自己的网格(您可以使用 css 使其可见或不可见),然后使用 snap 选项并指定我的每条网格线的类。
在您原来的 jsfiddle 中,我添加了以下 css:
.gridlines
display: none;
position:absolute;
background-color:#ccc;
以及以下 javascript:
function createGrid(size)
var i,
sel = $('.drop-target'),
height = sel.height(),
width = sel.width(),
ratioW = Math.floor(width / size),
ratioH = Math.floor(height / size);
for (i = 0; i <= ratioW; i++) // vertical grid lines
$('<div />').css(
'top': 0,
'left': i * size,
'width': 1,
'height': height
)
.addClass('gridlines')
.appendTo(sel);
for (i = 0; i <= ratioH; i++) // horizontal grid lines
$('<div />').css(
'top': i * size,
'left': 0,
'width': width,
'height': 1
)
.addClass('gridlines')
.appendTo(sel);
$('.gridlines').show();
createGrid(20);
这里是 jsFiddle (http://jsfiddle.net/madstop/46sqd/2/)
【讨论】:
以上是关于让 jQuery 可拖动以捕捉到特定网格的主要内容,如果未能解决你的问题,请参考以下文章