新创建的dom元素不可拖动

Question

我正在使用jquery和jquery ui创建可拖动元素。 我在https://jsfiddle.net/2j2c8vLc/上创建了一个小jsfiddle示例，该示例演示了我正在尝试做的事情。

JavaScript代码：

$(function(){
    $('body').append('<div id="moshe">hi</div>');
    $('#moshe').draggable();
});

在示例中，我在文档准备事件后将div元素添加到主体，然后尝试使其可拖动。 结果是它不可拖动，将类添加到了元素中，但这似乎还不够。

有任何想法吗？

更新

更多信息以解决问题..我正在尝试移动只读文本输入。

我使用以下JavaScript代码在http://jsfiddle.net/70f3dbLh/2/创建了新的jsfiddle：

$(document).ready(function(){
    $("<div>").attr("id", "moshe").html("<input readonly type=\"text\"></input>").appendTo("body").draggable();
});

如您在这里看到的.. div中的文本输入不可拖动

我试图创建另一个示例，尝试创建不带div的文本输入并使它可拖动..相同的结果。 它是不可拖动的。

jsfiddle位于http://jsfiddle.net/70f3dbLh/3/

JavaScript代码：

$(document).ready(function(){
    $("<input readonly value=\"aaa\" type=\"text\"></input>").attr("id", "moshe").appendTo("body").draggable();
});

Answer 1

使用以下jsfiddle： http : //jsfiddle.net/70f3dbLh/1/并查看此内容： http : //jsfiddle.net/70f3dbLh/1/show/

代码类似于

$(document).ready(function(){
    $("<div>").attr("id", "moshe").html("hi").appendTo("body").draggable();
});

然后可以拖动。

更新您的更新我更新了我的帖子，因为您更新了自己的帖子。

我添加了一个新的jsfiddle。 http://jsfiddle.net/8scyhq01/2/通常，“输入字段”不可拖动，但是如果在输入字段上方放置一层，则该层是可拖动的。 并且输入字段也将被拖动。

$("<div>").addClass("layer").attr("id", "moshe").html("<div class=\"layer\"></div><input readonly type=\"text\"></input>").appendTo("body").draggable();

Answer 2

我修改了我发现的代码， 在这篇文章中使文本输入可拖动，并在其顶部放置了一个div。

  $(function() { $( "#resizable" ).resizable({ containment: "#container" }); $( "#draggable" ).draggable({containment: "#container"}); }); 

  #container { width: 300px; height: 300px; } #container h3 { text-align: center; margin: 0; margin-bottom: 10px; } #resizable, #container { padding: 0.5em; } #d{ background:blue; width:100px; height:30px; position:relative; top: 2em; left:0em; z-index:9; opacity:0.1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <div id="container" class="ui-widget-content"> <h3 class="ui-widget-header">Containment</h3> <span id="draggable"><div id='d'></div> <input type="text "id="resizable" class="ui-state-active" readonly value="This is input box"> </span> </div>