新创建的dom元素不可拖动

Question

I'm using jquery and jquery ui to create draggable elements. i created a small jsfiddle example at https://jsfiddle.net/2j2c8vLc/ that demonstrates what i'm trying to do.

javascript code:

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

in the example i add to the body a div element after document ready event and then trying to make it draggable. the results are that it's not draggable, the classes are added to the element but it seems that it's not enough.

any ideas?

update

more info to clear things up.. i'm trying to move a readonly text input.

i created new jsfiddle at http://jsfiddle.net/70f3dbLh/2/ with the following javascript code:

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

as you can see here.. the text input inside the div is not draggable

i tried to create another example of trying to create a text input without a div and make it draggable.. same results. it's not draggable.

jsfiddle at http://jsfiddle.net/70f3dbLh/3/

javascript code:

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

Answer 1

Use following jsfiddle: http://jsfiddle.net/70f3dbLh/1/ and look at this: http://jsfiddle.net/70f3dbLh/1/show/

The code is something like

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

It is then draggable.

Update on your update I updated my post, because you updated your post.

I added a new jsfiddle. http://jsfiddle.net/8scyhq01/2/ In general, Input Fields are not draggable, but if you put a layer above the input field, this layer then is draggable. And the Input Field will be dragged too.

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

Answer 2

I have modified a code I found, From this post to make text input draggable, putting a div on top of it.

  $(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>