可拖動的元素使其捕捉到高點周圍的頂點

我只是想用一個拖動的元素製作一個網格，並使它與我正在拖動的元素周圍的頂點對齊。如果snapTolerance太高（網格大小即20px），但資產不能被20除盡，則不會捕捉到下一個頂點，但會跳到下一個塊20px。我不知道我是否清楚，但這是一個jsfiddle，可能會幫助你更好地理解這一點。可拖動的元素使其捕捉到高點周圍的頂點

在這個例子中，我希望右側碰到下一個塊跳轉之前的下一個頂點。現在可以用jQuery UI嗎？

我可以減少snapTolerance，但由於拖動元素的大小可能會有所不同，因此活動效果不會那麼平滑。

我想讓它始終卡在頂點上，但是拖動元素的邊緣可以捕捉到周圍的每個頂點。

$(".draggable-block").draggable({ 
    snapTolerance: 20, 
    snap: '.guide-line' 
});

來源

2014-10-02 msqar

我讀了幾個時間你的問題，但我不認爲我明白你真正想要什麼。你的小提琴演示似乎符合實際問題！ – Brewal 2014-10-06 19:05:37

只是玩了一下：[demo]（http://jsfiddle.net/ofk0smrf/5/）你可以使用6的'snapTolerance'，並使網格爲「0寬度」，以防止捕捉到雙方邊界......我看不到任何適合更好的行爲？ – Brewal 2014-10-06 19:17:24

讓我在幾分鐘內檢查Brewal，但我認爲你是對的。 – msqar 2014-10-07 20:04:44

嘗試使用這個選項，而不是捕捉的：

$(".draggable-block").draggable({ 
    //snapTolerance: 20, 
    //snap: '.guide-line', 
    //snapMode: "inner", 
    grid: [ 5, 5 ] 
});

http://api.jqueryui.com/draggable/#option-grid

它看起來像JQuery用戶界面拖動只與它的左上角對齊，並且總是在該點的線對齊。

你可以嘗試做的拖動事件的東西，看看有沒有什麼有用的UI參數：

http://api.jqueryui.com/draggable/#event-drag

你需要使用一個20像素的網格？如果沒有，您可以根據可拖動的寬度或高度定義網格線。

var grid = $('<div>', {'id': 'grid'}); 
var gridWidth = $('.draggable-block').width()/5; 
var guideLinePos = gridWidth; 
var guideLabel = ""; 
while(guideLinePos <= 1000) { 
    if(((guideLinePos - gridWidth) % gridWidth) == 0) { 
     guideLabel = "<div class='guide-line vertical-line'></div>"; 
     $(guideLabel).css("left", guideLinePos+"px").appendTo(grid); 
    } 
    guideLinePos = (guideLinePos + gridWidth); 
}

來源

2014-10-06 18:02:05 OrangeKing89

是的，我已經嘗試過了......但是當你擁有不同尺寸的元素時，它有點讓人搞不懂。即使嘗試在拖動事件期間更改網格，但這不是一個好主意:( – msqar 2014-10-06 18:17:30

如果您有像158x67這樣的元素，則無法使用網格選項 – msqar 2014-10-06 18:18:20

是的，網格必須是10x10,20x20或40x40。 – msqar 2014-10-06 19:07:03

不幸的JS撥弄或者不說明問題：或問題是物體不能均勻地由網格來劃分（IE：一個60像素* 60像素塊不以40 * 40格合身）

我建議你看看Gsap Draggable Library來解決這個問題。它在解決這個問題上做得很好。

來源

2014-10-12 00:03:26 Burdock

請避免鏈接唯一的答案。 – Mrchief 2014-10-13 17:17:35

可拖動的元素使其捕捉到高點周圍的頂點

回答

相關問題