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

这是一个试图解决拖动元素与网格对齐问题的尝试（我在上一个问题中对此进行了概述-）

到目前为止，我已经确定问题在于jQuery在调用

.draggable（）

时计算元素的位置，并创建相对于元素的网格，而不是相对于元素的父元素的网格（这更直观）

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

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

  draggable（）

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

如何重新执行此操作，以便可以重新定位元素，然后对其调用

.draggable（）

，所有这些都只需一个mousedown事件

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

});

---

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

你可以实现一个定制的网格函数，比我想象的要容易得多。这将为您简化事情，因为您不需要担心重新定位和使用jQueryUI的网格

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

//自定义网格
$（'方框-3'）。可拖动({
拖动：函数（事件、ui）{
var snapTolerance=$（this）.draggable（'option'，'snapTolerance'）；
var TopRequires=ui.position.top%20；
var leftrements=ui.position.left%20；
如果（这是一个多么漂亮的问题。一个有趣的问题，对问题的清晰描述，以及一把完美的小提琴。帽子：成功了。它得到了回报-不可能有更好的答案！很高兴。你的答案同样解决了问题，但去掉一些复杂性似乎很好。@Nate-事实上这正是我真正想要的-a操作我自己的网格的方法。我花了一整天的时间尝试破解不同的解决方案，但现在我真的有了可以使用的东西。谢谢！我真的很高兴能帮上忙！这很有效，而且是一个简单的修复方法。尽管如此，我还是把它给了内特，因为他真的为整个事情带来了更好的方法。谢谢--
// 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;
        }
    }  
});