在使用 jQuery UI 拖动之前重新定位元素

Question

这是一种尝试解决拖动元素对齐网格的问题（我在上一个问题中概述了这一点-Getting jQuery draggable to snap to specific grid）

到目前为止，我已经确定问题在于 jQuery 在调用 .draggable() 时计算元素的位置，并创建相对于元素的网格，而不是相对于元素的父级（这将更直观）。

在以下解决方案中，我们看到 3 个框：

• 框 1 从 0,0 开始，因此将与父元素的网格对齐。
• 框 2 从与网格不对齐的点开始，因此在拖动时永远不会与其对齐。
• 框 3 也是从与网格不对齐的点开始的，但在这种情况下，我们捕获鼠标按下事件，并将元素重新定位到最近的网格点，然后我们调用 @987654325 @。

选项 3 适用于元素现在将与网格对齐的情况。问题是，它需要两个鼠标事件：一个重新定位元素，并且只有在下一个 mousedown 事件（在它变成黄色之后）才会真正开始拖动。

我怎样才能重做此操作，以便可以重新定位元素，然后调用 .draggable()，这一切都只需要一个 mousedown 事件？

http://jsfiddle.net/8RnBf/34/

JS：

$('#box-1').draggable({
    grid: [ 20,20 ] 
});
$('#box-2').draggable({
    grid: [ 20,20 ] 
});

var isDraggable = false;
$('#box-3').mousedown(function(e){

    console.log('MOUSE DOWN');

    if (isDraggable == false) {
        var $this = $(this);

        // Reposition to nearest grid position:
        currentX = parseInt($this.css('left'));
        currentY = parseInt($this.css('top'));
        nearestGridX = Math.round(currentX/20) * 20;
        nearestGridY = Math.round(currentY/20) * 20;
        $this.css({left:nearestGridX+'px',top:nearestGridY+'px'});

        // Turn yellow:
        $this.css({background:'yellow'});

        // Make draggable:
        isDraggable = true;
        $this.draggable({
                grid: [ 20,20 ],
                start: function( event, ui ) {
                    console.log('START');
                }  
        });
        $this.trigger("mousedown");
    }

});

Answer 1

Live Demo

您可以比我想象的更容易实现自定义网格函数。这应该会为您简化事情，因为您无需担心重新定位然后使用 jQuery UI 的网格。

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

另外，according to Scott Gonzalez，网格选项将在未来消失，因为它自己实现起来很简单，所以这也为你的未来做好了准备。

Answer 2

不只是传递事件类型作为触发方法的参数，而是传递事件：

DEMO

$this.trigger(e);