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

私はあなたのコード例を私のバージョンで更新しました：

$('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（）を使用しています。

クリックされた要素のインデックスが現在選択されている要素のインデックスよりも小さい場合は、現在選択されている要素をクリックされた要素の前に移動して、その場所に配置します。クリックされた要素のインデックスが現在選択されている要素のインデックスよりも大きい場合は、現在選択されている要素をクリックされた要素の後に移動して、その場所に配置します。

要素が一度に1つずつ移動する理由については、完全にはわかりませんが、jQueryオブジェクトではなく、生のDOM要素を移動することがあると思います。もし彼らがIDを持っていたら、おそらくそれは異なっていただろう。いずれにせよ、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 に答える