使用data（）和attr（）拾取和調用原始CSS可以在Firefox中使用，但不能在Opera和Chrome中使用嗎？

Question

我希望能夠在jquery中的某些事件上拖動（jquery ui draggable() ）后將draggable 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中無法使用。 我試圖用attr（）替換data（），但還是一樣。

如何以更跨瀏覽器的方式實現？

編輯 ：這是運行中的代碼： http ： //jsfiddle.net/MVCA6/

Answer 1

這里的問題是，jQuery UI Draggable使用top和left屬性來移動元素，而您使用bottom和right來設置紅色框的位置；

將console.log($('#nav').data())到click事件中，您將看到屬性x和y都設置為auto 。

為了解決這個問題，您需要更新CSS以使用top和left定位紅色框。

示例： http ： //jsfiddle.net/MVCA6/1/

附帶說明：適當的代碼縮進可以幫助解決調試問題。

Answer 2

在chrome中，我已經看到使用

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

返回auto ;

在mozilla中，它給出了

447px

可能這就是為什么它不能在chrome中工作的原因。但是如果在CSS中的#nav中將left和top屬性分配為

left:447px;top:352px

工作正常。 在此處查看演示

有關更多詳細信息，您也可以從這里獲取幫助