12

iOS を実行しているユーザーがページ上<div>でクラスを移動できるようにする次のコードが.dragあります。これは、 のインスタンスが 1 つある場合は正常に.drag機能しますが、インスタンスが 2 つある場合は機能しません。コードですべての を見つけて、<div>ドラッグできるようにすることは可能ですか?

var drag = $(".drag")[0];
    xPos = drag.offsetWidth / 2;
    yPos = drag.offsetHeight / 2;
    drag.addEventListener("touchmove", function() {
        event.preventDefault();
        $(this).css({
        'left' : event.targetTouches[0].pageX - xPos + 'px', 
        'top' : event.targetTouches[0].pageY - yPos + 'px'
    });
});
4

4 に答える 4

15

を使用すると、セレクターに一致する最初の$(selector)[0]DOM 要素が取得されます。代わりに使用して、セレクターに一致するすべての要素にイベント リスナーを追加します。.each()

$(".drag").each(function () {
    var drag = this;
    xPos = drag.offsetWidth / 2;
    yPos = drag.offsetHeight / 2;
    drag.addEventListener("touchmove", function() {
        event.preventDefault();
        $(this).css({
          'left' : event.targetTouches[0].pageX - xPos + 'px', 
          'top' : event.targetTouches[0].pageY - yPos + 'px'
        });
    });
});​
于 2012-09-09T01:36:47.880 に答える
1

はい、可能です。ただし、jQuery セレクター (複数の要素を選択して返すことができます) を使用し、すぐにアンラップして最初の要素を返します。全体で jQuery 関数を使用するようにコードを変更して、これを回避できます。

// an array of all elements with class "drag"
// each element is wrapped
var drag = $(".drag");

// selects all matching elements, but then references
// the first raw DOM element in the array
var drag = $(".drag")[0];

それを見る別の方法：

var matches = $(".drag");

// each() executes a function for each matched element
matches.each(function () {
    var drag = this; // raw dom element

    // or, wrap to get jQuery object
    // var drag = $(this);
});​

前述したように、コード全体で jQuery 関数を使用することもできます。私が目にする 2 つの簡単な例は、x/y 座標の計算とイベント バインディングです。

于 2012-09-09T01:36:32.607 に答える
0

まず、 を使用して最初の要素のみが必要であることを宣言します[0]。

次に、jQuery のon()メソッドを使用する必要があります。あなたが機能しているのを見る方法は次のとおりです。

var drag = $(".drag");

drag.on("touchmove", function(event) {
    xPos = $(this).offsetWidth / 2;
    yPos = $(this).offsetHeight / 2;

    event.preventDefault(); // preventDefault is IE-specific, is it?  

    $(this).css({
        'left' : event.targetTouches[0].pageX - xPos + 'px', 
        'top' : event.targetTouches[0].pageY - yPos + 'px'
        });
});
于 2012-09-09T01:47:35.410 に答える
0

これは、ほとんどの経験豊富な開発者にとっては明らかなことですが、私のように jQuery を複数の要素に適用するのに苦労している一部のジュニア開発者にとっては役立つかもしれません。

今日、スクリプトを div 自体の外にロードしていることを確認する必要があることを学びました。

最初の要素内に誤ってスクリプトを読み込んでいたため、jQuery 関数がページのさらに下にある他の div に適用されなかった理由がわかりませんでした。

親 < div > 内の < script > を示すスクリーンショット ^ やり方が間違っていた

于 2019-04-07T19:46:22.040 に答える