使 jQuery 可拖动以捕捉到特定网格 [英] Getting jQuery draggable to snap to specific grid

问题描述

(注意:有些人提出了类似的问题，但过于具体，没有给出有用的答案)

jQuery UI 的可拖动小部件具有对齐网格的选项，但无法设置网格的相对位置.

例如，我们的放置目标中有一个明确定义的 20x20 网格.在放置目标内从 0,0 开始的拖动项目将与网格对应对齐.但是从不同位置或放置目标外部开始的拖动项目不会与该网格对齐.

http://jsfiddle.net/FNhFX/5/

HTML:

<div class="drag-item">拖动我</div><div class="drag-item" style="left:87px;top:87px;">拖拽我</div>
<div class="outside-drag-item">拖动我</div>

JS:

$(function() {$(".drag-item").draggable({网格:[20, 20]});$(".outside-drag-item").draggable({网格:[20, 20]，帮手:克隆"});$(".drop-target").droppable({接受:.drag-item"});});

是否有任何方法可以使用 jQuery draggable 捕捉到特定网格?

解决方案

我将继续在这里发布答案，尽管我是通过 您提出的后续问题.

您可以在 jQuery UI 可拖动对象上的 drag 事件中轻松创建自己的对齐网格功能.

基本上，您想检查当前 ui 位置在可拖动对象被拖动到网格的任何点的接近程度.该接近度始终可以表示为位置除以网格的剩余部分.如果该余数小于或等于 snapTolerance，则只需将位置设置为没有该余数时的位置.

用散文说这很奇怪.在代码中应该更清楚:

现场演示

//自定义网格$('#box-3').draggable({拖动:函数(事件，用户界面){var snapTolerance = $(this).draggable('option', 'snapTolerance');var topRemainder = ui.position.top % 20;var leftRemainder = ui.position.left % 20;如果(topRemainder <= snapTolerance){ui.position.top = ui.position.top - topRemainder;}if (leftRemainder <= snapTolerance) {ui.position.left = ui.position.left - leftRemainder;}}});

(NOTE: Some have asked similar questions, but were too specific and yielded no usable answers)

jQuery UI's draggable widget has options for snapping to a grid, but no way to set what the grid is relative to.

For example, we've got a clearly defined 20x20 grid in our drop target. A drag item that starts at 0,0 within the drop target will snap in correspondence with the grid. But a drag item that starts at a different location, or outside the drop target, will not line up with that grid.

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"
    });
});

Is there any way to snap to a specific grid using jQuery draggable?

解决方案

I'm going to go ahead and post an answer here, too, though I came here via a followup question you asked.

You can create your own snap-to-grid functionality very easily inside the drag event on a jQuery UI draggable.

Basically, you want to check how close the current ui position is at any point that the draggable is being dragged to a grid. That proximity can always be represented as the remainder of the position divided by the grid. If that remainder is less than or equal to the snapTolerance, then just set the position to what it would be without that remainder.

That was weird to say in prose. In the code it should be more clear:

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;
        }
    }  
});

这篇关于使 jQuery 可拖动以捕捉到特定网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！