0

JQueryを使用して衝突する複数のdiv要素をどのように検出しますか? 解決策を見つけましたが、2 つの要素しか検出されません。複数の div ID をその関数にどのように渡しますか?

HTML:

<strong>Drag divs around.</strong>

<div id="div1">
    Div1
</div><br/>
<div id="div2">
    Div2
</div>

<p>Colliding? <span id="result">false</span>

CSS:

#div1 { width: 200px; height: 50px; background-color: pink; }
#div2 { width: 400px; height: 100px; background-color: green; }

jQuery:

function collision($div1, $div2) {
      var x1 = $div1.offset().left;
      var y1 = $div1.offset().top;
      var h1 = $div1.outerHeight(true);
      var w1 = $div1.outerWidth(true);
      var b1 = y1 + h1;
      var r1 = x1 + w1;
      var x2 = $div2.offset().left;
      var y2 = $div2.offset().top;
      var h2 = $div2.outerHeight(true);
      var w2 = $div2.outerWidth(true);
      var b2 = y2 + h2;
      var r2 = x2 + w2;

      if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
      return true;
}


window.setInterval(function() {
    $('#result').text(collision($('#div1'), $('#div2')));
}, 200);


$('#div1,#div2').draggable();
4

2 に答える 2

0

独自のメソッドを再利用するのは良い考えのようcollisionですが、衝突する可能性のある div の可能な組み合わせをそれぞれ調べてみましょう。

function collision_() {
    if (arguments.length > 1) {
        for (var x = 0; x < arguments.length; x++) {
            for (var y = 1; y < arguments.length; y++) {
                if (x == y) {
                    continue;
                }
                if (collision(arguments[x], arguments[y])) {
                    return true;
                }
            }
        }
        return false;
    }
}

これは可能な限り最適ではありませんが、仕事は完了します。さらに最適にしたい場合は、演習として残します。

http://jsfiddle.net/ExplosionPIlls/nGRwt/132/

于 2013-01-31T06:13:02.047 に答える
0

任意の数値またはパラメーターを関数に渡し、その中でarguments渡されたすべての引数の配列であるキーワードを使用できます。

function doStuff(){
  for( var i = 0; i < arguments.length; i++ ) {
    var arg = arguments[i];
    //Do stuff with arg now.
  }
}

また、.draggable()jQuery UI にはアイテムをスタックする機能がありますが、それが最終的な目標ですか?

HTML

<div id="div1" class='box'>Div1</div>
<div id="div2" class='box'>Div2</div>

jQuery

$('.box').draggable({stack: '.box'});

その例でデモを作成しました：http://jsfiddle.net/ChrisMBarr/nGRwt/134/

于 2013-01-31T06:13:11.100 に答える