JQuery drag and drop not working in FF3.6 after I implement CSS3 flexible box layout, any ideas?
I'm experimenting with the latest CSS3 box model to enable my layout to dynamically resize as the page resizes. The problem is that in Firefox 3.6 (works perfectly in Chrome) my drag and drop gets a bug. I'm not sure if it's a firefox, Jquery or my own error? But what it looks like is the position of the cloned object i'm dragging is receiving 30px extra for pos.left.
That means that when I drop my button into the tabbed area it isn't locked properly inside the draggable area which is #page1. Rather, it seems like there is 30px of extra margin which the button is mysteriously residing in. When I drag my button to the bottom of the page, because of this 'margin' it appears to float outside of page1 and the tab content.
Moreover, if I use firebug to outline the containers, they all look properly sized (no funny overflow or anything like that). However, if I take out the box model code inside outer-container, tab-content, page1, footer and manually set the tab-content height to say, 800px then the bug goes away.
It seems to be happening here:
var pos= $(ui.helper).offset();
objName = "#clonediv"+counter;
$(objName).css({"left":pos.left,"top":pos.top});
my code is here: http://jsfiddle.net/yLCZb/5/
any ideas?? I'd love to use this box model technique if i could get it to work 开发者_StackOverflowin FF..
I'm not a jquery guy, but it looks like your mixing & matching of doctypes is confusing FireFox. Try the vanilla HTML5 doctype declaration:
<!DOCTYPE html>
You should also lose the XHTML constructs and the "language" attribute from your <script> tag.
HTH!
加载中,请稍侯......
精彩评论