重新定位元素

這是解決拖動的元素對準網格（我在以前的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

重新定位元素

回答

相關問題