jquery UI在同一元素上可调整的Draggable

在使用相同元素（例如div元素）上的可调整大小的jQuery UI可拖动时，我遇到一些问题。当我在同一元素上同时应用可拖动和可调整大小时，它会生成一个包含一个可拖动和其他2个可拖动div的3个div的堆叠。我不知道它有什么问题。我试图按照jqueryui.com上给出的指示，我没有弄清楚我的html有什么问题。这里是代码。jquery UI在同一元素上可调整的Draggable

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server"> 

    <link type="text/css" href="UI/jquery-ui-1.7.2.custom.css" rel="stylesheet" /> 

    <script type="text/javascript" src="../JS/jquery-1.3.2.js"></script> 

    <script type="text/javascript" src="UI/ui.core.js"></script> 

    <script type="text/javascript" src="UI/ui.draggable.js"></script> 
<script type="text/javascript" src="UI/ui.resizable.js"></script> 

    <style type="text/css"> 

     #demo-frame 
     { 
      border: 1px solid #DDDDDD; 
      clear: right; 
      height: 300px; 
      overflow: hidden; 

      width: 520px; 
     } 
     #demo-frame .demo 
     { 
      padding: 5px; 
     } 

     #demo-frame .demo div 
     { 
      width: 100px; 
      height: 70px; 
      background-color:Transparent; 
      border:solid 1px black; 
      cursor:move; 
     } 
    </style> 

<script type="text/javascript"> 
    $(function() 
    { 
     $("#MainCanvas div").draggable(); 
    }); 


    $(document).ready(function() 
    { 
     $("#MainCanvas").click(function() 
     { 
      $(this).children("div").css("border-style", "solid"); 
     }); 

     $("#MainCanvas div").live("mouseover", function() 
     { 
      $(this).css("border-color", "red"); 
     }); 

     $("#MainCanvas div").live("mouseout", function() 
     { 
      $(this).css("border-color", "black"); 
     }); 
     $("#MainCanvas div").live("mouseover", function() 
     { 
      $(this).draggable(); 
     }); 

     $("#MainCanvas div").live("click", function() 
     { 
      $("#MainCanvas div").css("border-style", "solid"); 
      $(this).css("border-style", "dashed"); 
      $(this).resizable(); 
     }); 

     $("#AddText").click(function() 
     { 
      var newDiv = $("<div></div"); 

      $(newDiv).html("New div"); 
      $("#MainCanvas").append(newDiv); 
     }); 
    }); 
    </script> 
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"> 

    <div id="demo-frame"> 
     <div class="demo" id="MainCanvas"> 
      <div> 
       <p> 
        Drag me around</p> 
      </div> 
     </div> 

    </div><br /><input type="button" value="Add Text" id ="AddText" /> 

</asp:Content>

来源

2009-12-28 Jehanzeb afridi

你在你的代码

var newDiv = $("<div></div"); 
//should be 
var newDiv = $("<div></div>");

来源

2009-12-28 15:27:12 czarchaic

你有你的CSS，并通过调整大小插件创建元素的冲突有一个错误。这一位将匹配插件为句柄等添加的所有DIV。给容器DIV一个类并将CSS应用于该类，以便它与插件创建的元素不匹配

#demo-frame .demo div 
{ 
    width: 100px; 
    height: 70px; 
    background-color:Transparent; 
    border:solid 1px black; 
    cursor:move; 
}

应该是这样的：

.container 
{ 
    width: 100px; 
    height: 70px; 
    background-color:Transparent; 
    border:solid 1px black; 
    cursor:move; 
}

与标记改为：

<div id="demo-frame">  
    <div class="demo" id="MainCanvas">  
     <div class="container">  
      <p>Drag me around</p>  
     </div>  
    </div> 
</div> 
<br /> 
<input type="button" value="Add Text" id ="AddText" />

来源

2009-12-28 15:35:30 tvanfosson

jquery UI在同一元素上可调整的Draggable

回答

相关问题