+ -
当前位置:首页 → 问答吧 → [JQUERY UI]請問這段語法在firefox可正常運行但在ie7就不行?

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

时间:2009-08-09

来源:互联网

<!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>
請教各位前輩
請幫小弟解決一下問題
[ 此帖被awelkije在2009-08-09 20:12重新编辑 ]

作者: awelkije   发布时间: 2009-08-09