重新定位元素

这是解决拖动的元素对准网格（我在以前的question- Getting jQuery draggable to snap to specific grid概述本）重新定位元素

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

在下面的解决方案，我们看到了3盒：

箱1 0,0开出，因此将与父元素的网格对齐。
方框2从与网格不对齐的点开始，因此拖动时不会与其对齐。
框3也开始在一个点不与网格对齐，但在这种情况下，我们捕捉鼠标向下的事件，并将元素重新定位到最近的网格点，然后才拨打draggable()。

只要元素现在将与网格对齐，选项3就起作用。问题是，它需要两个鼠标事件：一个重新定位元素，并且只在下一个mousedown事件中（在变黄之后），实际上会拖动一个拖拽。

我该如何重做此操作以便元素可以被重新定位，然后有.draggable()调用它，所有与一个单一的mousedown事件？

Aligning drag elements to grid

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

});

来源

2013-12-20 Yarin

多么美丽的问题。一个有趣的问题，对问题的清晰描述，以及完美的小提琴。脱帽致敬。 – Nate

它付出了 - 不能要求更好的答案！ – Yarin

您可以更容易比我早就猜到实现自定义的网格功能。这应该为你简化一些事情，因为你不需要担心重新定位，然后使用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，网格选项即将于未来，因为它是微不足道依靠自己的力量实现的那种东西，所以这个设置你的未来变得更加美好了。

来源

2013-12-20 21:36:58 Nate

看起来像要走，thx分享和信息 –

很开心。你的答案尽可能多地解决了这个问题，但是消除一些复杂性看起来不错。 – Nate

@Nate-这实际上是我真正想要的 - 一种操纵我自己的网格的方式。我花了一整天的时间试图破解不同的解决方案，但现在我已经有了一些可以与之合作的东西。谢谢！ – Yarin

相反只是路过事件的类型作为触发方法的参数的，传递事件：

DEMO

$this.trigger(e);

来源

2013-12-20 21:21:45

这工作，并且是一个简单的修复。把它交给Nate，因为他真的为整个事情带来了更好的方法。谢谢 - – Yarin

重新定位元素

回答

相关问题