Jquery-ui 中的可拖动方法不适用于创建的元素答案

【问题标题】：Draggable Method in Jquery-ui not working with created elementsJquery-ui 中的可拖动方法不适用于创建的元素
【发布时间】：2017-04-18 16:49:13
【问题描述】：

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

我包含 jquery-ui 和 jquery 的问题；但是draggable方法仍然不起作用，它成功将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>

有什么问题吗？？

【问题讨论】：

我在您的 HTML 中看不到 #container。这个元素在哪里？我怀疑创建的项目无法附加，因为目标不存在。

标签： jquery html jquery-ui draggable

【解决方案1】：

可拖动的 div 在那里，但 textarea 无法拖动，因为您在其中输入/可以重新调整它的大小。只需让它比你的内部 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()to 更改为

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

【讨论】：

没有问题。乐意效劳。 :-)

【解决方案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()。

希望对您有所帮助。

【讨论】：