使用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

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

有关更多详细信息，您也可以从这里获取帮助