0

我正在做一个项目，并且一直坚持通过 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 函数不是我应该使用的？

4

3 回答 3

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 对象，它可以按预期工作。

让我知道这是否是您要找的东西！

于 2012-11-04T20:48:56.030 回答
0

我不确定我是否理解您的建议，但认为这就是您想要的：

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

问候， 罗曼

于 2012-11-04T20:33:09.407 回答
0 
$('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()。

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

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

  • 当它在上排时
  • 或者
  • 当它在同一行并且在左侧时

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

于 2012-11-04T20:33:50.577 回答