Draggable Method in Jquery-ui not working with created elements

Question

I have an image that when i click on it , it should create a div and place it within a container (Parent div ) and make it Draggable.

The problem that i have included the jquery-ui and the jquery ; but still the draggable method not working, it succeeded to add the div in the container but it's not draggable.

here is jquery peace of code :

var $homy;
var texty;
function perform(){
$homy=$("<div class='cabine'></div>");
texty=$("<textarea class='sub'></textarea>");
$homy.append(texty);
$homy.draggable();
$homy.appendTo("#container");
}

here is the html part :

<div>
<img class="accept" src="done.png" onclick="perform()" width="40" height="40">
</div>

is there something wrong??

Answer 1

The drag-able div was there, but textarea cannot be dragged because you type into it/ can re-size it. Just make it smaller than your inner div and give it some definition with borders.

JSFiddle Demo

#container{
  border-style: solid;
  width: 400px;
  height: 200px;
}
.cabine{
  border-style: solid;
  width: 200px;
  height: 100px;
  position:relative;
  margin-left:50px;
  margin-top:20px;
}
.sub{
  width: 100px;
  height: 50px;
  text-align: center;
  margin-left:50px;
  margin-top:20px;
  resize: none;
}

To keep the inner div inside the outer, change .draggable()to

$homy.draggable({ containment: "parent" });