JQuery-UI中的可拖动方法无法与创建元素一起使用

Question

我有一个图像，当我单击它时，它应该创建一个div并将其放置在容器(父div(中并使其使其拖动。

我包括jQuery-ui和jQuery的问题；但是仍然是可拖动的方法不起作用，它成功地将DIV添加到容器中，但不可拖动。

这是代码的平静：

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

要保持内部div内部，将.draggable()更改为

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

Answer 2

如前所述，我在您的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()。

希望会有所帮助。