0

draggable()jqueryのイベントで(jquery ui ) をドラッグした後、ドラッグ可能な div を元の位置にリセットできるようにしたいと考えています。これは私がしました：

$('#nav').draggable();

$('#nav').data({'x': $("#nav").css('left'), 'y': $("#nav").css('top')});

$("#c").click(function () {
    $('#nav').animate({'left': parseInt($("#nav").data('x')) - 15, 'top': parseInt($("#nav").data('y')) - 14}, {duration : 500});
});

古い Firefox でも動作しますが、最新の Opera と Chrome では動作しません。data() を attr() に置き換えようとしましたが、それでも同じです。

よりクロスブラウザな方法でこれをどのように達成できますか?

編集：これが実際のコードです：http://jsfiddle.net/MVCA6/

4

2 に答える 2

1

ここでの問題は、jQuery UI Draggable がtopandleftプロパティを使用して要素を移動するのに対し、 and を使用して赤いボックスの位置を設定していることbottomですright。

console.log($('#nav').data())クリック イベントに追加するxと、プロパティが表示yされ、両方とも に設定されautoます。

topこれを解決するには、 CSS を更新して、 とを使用して赤いボックスを配置する必要がありますleft。

例: http://jsfiddle.net/MVCA6/1/

補足として:コードの適切なインデントは、問題のデバッグに関して驚くべき助けになります。

于 2014-07-24T10:59:02.547 に答える
1

クロムでは、使用した結果を見たことがあります

console.log($("#nav").data('x'));

戻りautoます。

mozillaでは、それは与えます

447px

おそらく、これが chrome で機能しない理由である可能性があります。

left:447px;top:352px

それは正常に動作します。 ここでデモを見る

詳細については、こちらからもサポートを受けることができます

于 2014-07-24T10:59:26.310 に答える