Jquery-uiでDraggableメソッドが作成された要素と連携していません

Question

私がクリックすると、divを作成してコンテナ（親div）内に配置してDraggableにする必要があります。

私がjquery-uiとjqueryを含んでいるという問題。まだドラッグ可能なメソッドが動作していない場合、コンテナにdivを追加することに成功しましたが、ドラッグできません。ここ

は、コードのjqueryの平和である：ここ

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

は、HTMLの一部です：

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

は間違って何かがあります？

Answer 1

ドラッグ可能なdivがありましたが、テキストエリアにドラッグすることはできません。サイズを変更することができます。あなたの内側のdivよりも小さくして、境界線で定義してください。

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

述べたように.draggable()

に

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

Answer 2

を変更、外側の内側に内部のdivを保つために、私はあなたのHTMLに#containerが表示されません。私は次のことをお勧め：

$(function() { 
    var $homy, texty; 
    function perform(e) { 
    $homy = $("<div>", { 
     class: "cabine", 
     title: "Enter Caption" 
    }); 
    texty = $("<textarea>", { 
     class: "sub" 
    }); 
    $(e.target).parent().append($homy); 
    $homy.html(texty).dialog(); 
    } 
    $("img.accept").click(perform); 
}); 

実施例：https://jsfiddle.net/Twisty/zsdnsskg/

これはdivとtextareaを作成し、img後にそれらを追加し、.dialog()をキックオフ。

希望に役立ちます。