jquery UI Draggable with Resizable на том же элементе

Question

У меня есть проблема при использовании JQuery UI, который можно перетаскивать с возможностью изменения размера на один и тот же элемент, например элемент div. , когда я применяю как перетаскиваемый, так и изменяемый по размеру на один и тот же элемент, он создает стек из трех div с одним перетаскиваемым и другим 2 внутри этого divglable div. Я не знаю, что с ним не так. Я попытался выполнить инструкцию, приведенную на jqueryui.com, я не смог понять, что случилось с моим html. вот код.

<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> 

Answer 1

У вас ошибка в коде

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

Answer 2

У вас есть конфликт с CSS и элементов, созданных перебольшое плагин. Этот бит будет соответствовать всем DIVs добавленных плагин для ручек и т.д. Дайте контейнер 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" />