Javascript grid點擊重新組織

Question

我正在開發一個項目，並且一直在通過JQuery重組我的網格。我已經打破了問題分解成簡單的小提琴：http://jsfiddle.net/tylerbuchea/QgAqV/

$('div').bind('click', function() { 
    var pitcher = $('.selected')[0]; 
    var catcher = this; 

    if (catcher.offsetTop < pitcher.offsetTop || catcher.offsetLeft > pitcher.offsetLeft) { 
    $(pitcher).before(catcher); 
    console.log('before'); 
    } 

    else 
    if (catcher.offsetTop > pitcher.offsetTop || catcher.offsetLeft < pitcher.offsetLeft) { 
     $(pitcher).after(catcher); 
     console.log('after'); 
    } 
});​ 

我想要的「選擇」分區移動到點擊的div的位置，而痛失所有其他的div向下（或向上）。這工作正常，但如果你嘗試移動它不止一個空間......那麼你會看到這個問題。也許.before和.after函數不是我應該使用的？

Answer 1

我已更新您的代碼示例，其中包含My Version：

$('div').bind('click', function() { 
    var $currentlySelected = $('.selected'), 
     $newlyClicked = $(this), 
     currentlySelectedIndex = $currentlySelected.index(), 
     newlyClickedIndex = $newlyClicked.index(); 

    if (currentlySelectedIndex > newlyClickedIndex) { 
     $currentlySelected.insertBefore($newlyClicked); 
     console.log('is greater, so put it after'); 
    } else { 
     $currentlySelected.insertAfter($newlyClicked); 
     console.log('is less, so put it after'); 
    } 
});​ 

看看這個，告訴我它是否在做你想要的。我稍微改變了你的邏輯。我做的第一件事情不是檢查偏移量，而是使用.index（），它告訴我元素相對於它的同胞的位置。

如果點擊的元素索引小於當前選定的元素索引，那麼我將當前選定的元素移動到點擊元素之前，以便它取代它的位置。如果單擊的元素的索引大於當前選定的元素索引，則將當前選定的元素移動到單擊元素的後面，以便它取代它的位置。

至於你的元素爲什麼一次只移動一個，我不完全確定，但我的猜測是你有時會移動原始DOM元素，而不是jQuery對象。如果他們有ID，也許它會有所不同。無論如何，通過移動jQuery對象，它可以按照預期工作。

讓我知道這是你的期待！

Answer 2

我不知道如果我理解你的cuestion，但認爲這是你想要什麼：

$('div').bind('click', function() { 
    var pitcher = $('.selected')[0]; 
    var catcher = this; 

    if (catcher.offsetTop < pitcher.offsetTop || catcher.offsetLeft > pitcher.offsetLeft) { 
    $(catcher).after(pitcher); 
    console.log('before'); 
    } 

    else 
    if (catcher.offsetTop > pitcher.offsetTop || catcher.offsetLeft < pitcher.offsetLeft) { 
     $(catcher).before(pitcher); 
     console.log('after'); 
    } 
});​ 

問候， ROMEN

Answer 3

$('div').bind('click', function() { 
    var pitcher = $('.selected')[0]; 
    var catcher = this; 

    if (catcher.offsetTop < pitcher.offsetTop || catcher.offsetLeft > pitcher.offsetLeft) { 
    $(catcher).after(pitcher); 
    console.log('before'); 
    } 

    else 
    if (catcher.offsetTop > pitcher.offsetTop || catcher.offsetLeft < pitcher.offsetLeft) { 
     $(catcher).before(pitcher); 
     console.log('after'); 
    } 
}); 

你已經倒雙方的條件和使用的功能。關於如何在before（）/ after（）之後使用here。

由於有一個概念流程，當你有多行時，代碼仍然不起作用：你必須測試捕手是在邏輯上的投手之前/之後。

當瓷磚在另一個之前？

• 當它是在上排
• OR
• 當它是在同一行和它是在左邊

我離開休息給您練習