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

回答

相關問題