[英]Picking and calling original css with data() and attr() works in Firefox, but not in Opera and Chrome?
I want to be able to reset draggable div to it's original position after dragging (jquery ui draggable()
) on some event in jquery. 我希望能够在jquery中的某些事件上拖动(jquery ui draggable()
)后将draggable div重置为其原始位置。 I did this: 我这样做:
$('#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});
});
and it works even in older Firefox but not in newest Opera and Chrome. 而且即使在较旧的Firefox中也可以使用,但在最新的Opera和Chrome中无法使用。 I tried to replace data() with attr() and it's still the same. 我试图用attr()替换data(),但还是一样。
How can this be achieved in a more cross-browser manner? 如何以更跨浏览器的方式实现?
edit : here is this code in action: http://jsfiddle.net/MVCA6/ 编辑 :这是运行中的代码: http : //jsfiddle.net/MVCA6/
The problem here is that jQuery UI Draggable uses the top
and left
properties to move elements around, whereas you're setting the red boxes position using bottom
and right
; 这里的问题是,jQuery UI Draggable使用top
和left
属性来移动元素,而您使用bottom
和right
来设置红色框的位置;
Adding console.log($('#nav').data())
to the click event you'll see your properties x
and y
are both set to auto
. 将console.log($('#nav').data())
到click事件中,您将看到属性x
和y
都设置为auto
。
To solve this you'll need to update your CSS to position the red box using top
and left
. 为了解决这个问题,您需要更新CSS以使用top
和left
定位红色框。
Example: http://jsfiddle.net/MVCA6/1/ 示例: http : //jsfiddle.net/MVCA6/1/
As a side note: Proper indentation of code can help wonders when it comes to debugging issues. 附带说明:适当的代码缩进可以帮助解决调试问题。
In chrome i HAve seen result using 在chrome中,我已经看到使用
console.log($("#nav").data('x'));
It return auto
; 返回auto
;
In mozilla it gives 在mozilla中,它给出了
447px
Possibly this may be the reason why it is not working in chrome.But if you assign left and top property in #nav in css as 可能这就是为什么它不能在chrome中工作的原因。但是如果在CSS中的#nav中将left和top属性分配为
left:447px;top:352px
It works fine. 工作正常。 SEE DEMO HERE 在此处查看演示
For more detail you can also take help from HERE 有关更多详细信息,您也可以从这里获取帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.