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

这是尝试解决拖动元素与网格对齐的问题(我在之前的问题中概述了这个问题- Getting jQuery draggable to snap to specific grid)

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

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

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

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

});

解决方法

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,网格选项将在未来消失,因为它是一种微不足道的独立实现,所以这也为你的未来做好了准备.