jQuery：FF 中的可调整大小问题 - 需要调试帮助

发布于 2024-10-02 15:39:26 字数 2243 浏览 0 评论 0原文

请在 Firefox 中尝试以下操作（我的版本：3.6.12）。
这曾经有效，但现在不行了。它确实可以在 IE 中工作，并且可以在 FF 中的 jsFiddle 中工作 - 我在想插件可能会影响它。

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <title>Test</title>
   <link media="all" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" rel="stylesheet" />
   <style type="text/css" media="all">
      .ui-resizable-e {right:0; background:#eee; z-index:1000;}
      .ui-resizable-w {left :0; background:#eee; z-index:1000;}
       #foo
           {
              background   : #fff;
              border       : 1px solid #ccc;
              margin       : 0 auto;
              padding      : 1em; 
              text-align   : left;
              width        : 75%;
           }

   </style>
   <script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js" type="text/javascript"></script>
   <script type="text/javascript">
      $(function(){

         var foo = $('#foo');
         foo.resizable({
              animate       : true
            , animateEasing : 'swing' 
            , handles       : 'e,w'
            , resize        : function (event,ui){
                                 ui.position.left = ui.originalPosition.left;
                                 ui.size.width    = ( ui.size.width
                                                    - ui.originalSize.width )*2
                                                    + ui.originalSize.width;
                                 }
            });
      });
   </script>
</head>
<body>
   <div id="foo"></div>
</body>
</html>

重现错误：

抓住边缘之一并调整 div 大小（拖动然后释放）。
通常，一旦完成此操作，调整大小挂钩就应该被释放，但对我来说却没有。
取消单击夹点后，我可以单击主体中的任意位置（夹点的左侧/右侧）来调整 div 的大小。

我已经在上面添加了测试页面的完整 HTML（不长）。所有的CSS和脚本都链接到谷歌的库。

原文

Please try the following in Firefox (my version: 3.6.12).
This was working and now it's not.
IT does work in IE and it works in jsFiddle from w/in FF - I'm thinking an addon may be affecting it.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <title>Test</title>
   <link media="all" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" rel="stylesheet" />
   <style type="text/css" media="all">
      .ui-resizable-e {right:0; background:#eee; z-index:1000;}
      .ui-resizable-w {left :0; background:#eee; z-index:1000;}
       #foo
           {
              background   : #fff;
              border       : 1px solid #ccc;
              margin       : 0 auto;
              padding      : 1em; 
              text-align   : left;
              width        : 75%;
           }

   </style>
   <script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js" type="text/javascript"></script>
   <script type="text/javascript">
      $(function(){

         var foo = $('#foo');
         foo.resizable({
              animate       : true
            , animateEasing : 'swing' 
            , handles       : 'e,w'
            , resize        : function (event,ui){
                                 ui.position.left = ui.originalPosition.left;
                                 ui.size.width    = ( ui.size.width
                                                    - ui.originalSize.width )*2
                                                    + ui.originalSize.width;
                                 }
            });
      });
   </script>
</head>
<body>
   <div id="foo"></div>
</body>
</html>

To reproduce the error:

Grip one of the edges and resize the div (drag then release).
Normally once this is done, the resize hook should be released, however for me it is not.
After unclicking the grip, I can click anywhere in the body (to the left/right of the grip) to resize the div.

I've included the full HTML (not lengthy) of my test page above. All the css and script is linked to google's libraries.

分享到QQ

分享到微博