none
[JQUERY UI]請問這段語法在firefox可正常運行但在ie7就不行?

    問題

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style>
    #content {
        height: 95%;
        width: 95%;
        position: absolute;
    }
    #container {
        height: 98%;
        width: 50%;
        border: 3px solid #ccc;
        float: left;
    }
    #headlist {
        float: right;
        height: 20%;
        width: 48%;
        border: 1px solid #ccc;
        clear: none;
    }

    #hairlist {
        height: 20%;
        width: 48%;
        border: 1px solid #ccc;
        float: right;
        margin-top: 5px;
    }
    #fn {
        float: right;
        height: 50%;
        width: 48%;
        margin-top: 5px;
        border: 1px solid #ccc;
    }
    .myactive {
        opacity: 0.2;
        filter:alpha(opacity:20);
    }
    .myhover {
        border: 5px solid red;
    }
    #headlist  img {
        cursor: move;
    }
    #hairlist  img {
        cursor: move;
    }
    </style>
            <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
            <script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
            <link type="text/css" href="css/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet" />
            
    <script type="text/javascript">

    $(function(){
    var $container = $('#container');



    $("#face").resizable({
                                    autoHide: true,
                                    handles:'all',
                                    //ghost: true,
                                    minHeight:50,
                                    minWidth:50,
                                    maxHeight: 450,
                                    maxWidth: 800
                            
                                 })
                    
    .parent()
    .draggable({
                                    cursor: 'move',
                                    opacity: 0.35,
                                    containment: '#container',
                                    scroll: false
                                 })
                    
    $(".hairimages").draggable({
                                    cursor: 'move',
                                //    revert: 'invalid',
                                    opacity: 0.35,
                                    helper:'clone'
                                 })
                      
                      
                      
                      
    $container.droppable({
                        accept: '.hairimages',
                        activeClass: 'myactive',
                        hoverClass: 'myhover',
    drop: function(e,ui) {
        

    $(ui.draggable).clone().appendTo($(this)).resizable({
                                    
                                    autoHide: true,
                                    handles:'all',
                                    //ghost: true,
                                    aspectRatio: 1/1,
                                    minHeight:50,
                                    minWidth:50,
                                    maxHeight: 450,
                                    maxWidth: 800 ,
                            
                                })
    .parent()
    .draggable({
                                       cursor: 'move',
                                    containment: '#container',
                                    scroll: false
                                    });
                
    }


    });
                
                    
    });
            </script>            
    </head>

    <body>
    <div id="content">
      <div id="container">
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
      </div>
      <div id="headlist">
      
      <img src="images/face.jpeg" width="100" height="100" class="hairimages" />
       <img src="images/face2.jpeg" width="100" height="100" class="hairimages" />
      </div>
      <div id="hairlist">
      <img src="images/hair.png" width="100" height="100" class="hairimages" />
       <img src="images/hair2.png" width="100" height="100" class="hairimages" />
       <img src="images/hair3.png" width="100" height="100" class="hairimages" />
        <img src="images/hair4.png" width="100" height="100" class="hairimages" />
        </div>
      <div id="fn">
      
      </div>
    </div>
    </body>
    </html>
    作業系統版本-Windows xp sp2 開發工具版本-Visual Studio 2005 開發環境-Web Form
    2009年8月9日 下午 12:10

解答