Javascript网格单击以重新组织

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对象。如果他们有身份证，可能就不一样了。在任何情况下，通过移动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');
     }
});​

问候你，Romén

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 ()之前使用/after()。

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

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

当它在上面的行上时，它在同一行

• OR

• when上，它在

的左边

剩下的就交给你做练习吧