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 回答