jquery UI Draggable avec redimensionnable sur le même élément

Question

J'ai un problème lors de l'utilisation de Jquery UI draggable avec redimensionnable sur le même élément, par exemple un élément div. lorsque j'applique à la fois glisser et redimensionner sur le même élément, il produit une pile de 3 divs avec un draggable et 2 autres à l'intérieur de ce div dragglable. Je ne sais pas ce qui ne va pas avec. J'ai essayé de suivre les instructions données sur jqueryui.com, j'ai échoué à comprendre ce qui ne va pas avec mon code HTML. voici le code.

<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

Vous avez une erreur dans votre code

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

Answer 2

Vous avez un conflit avec votre CSS et les éléments créés par le plug-in redimensionnable. Ce bit correspondra à tous les DIVs ajoutés par le plug-in pour les poignées, etc. Donner le conteneur DIV une classe et d'appliquer le CSS à cette classe afin qu'il ne correspond pas aux éléments créés par le plugin

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

devrait être quelque chose comme:

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

avec le balisage changé pour:

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