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位置，其他所有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

我不确定我是否理解你的猜测，但认为这就是你想要的：

$('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');
     }
});

您已经反转了条件和功能的使用。看看here如何使用before（）/ after（）。

当你有多个行时，代码仍然不起作用，因为有一个概念流：你必须在逻辑术语中测试捕手是否在投手之前/之后。

当瓷砖出现在另一个瓷砖之前？

当它在上排时
或

当它位于同一行 AND 时，它位于左侧

我把剩下的作为练习留给你了

Javascript网格点击重新组织

3 个答案: