更新

Question

我使用jquery和jquery ui创建可拖动元素。我在https://jsfiddle.net/2j2c8vLc/创建了一个小jsfiddle示例这表明了我想要做的事情。

javascript代码：

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

在示例中，我在文档就绪事件之后向body添加div元素，然后尝试使其可拖动。结果是它不可拖动，类被添加到元素中但看起来还不够。

任何想法？

更新

更多信息清理...我试图移动只读文本输入。

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

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

我已修改过了我发现的一个代码，From this post使文本输入可拖动，在它上面放置一个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>

新创建的dom元素无法拖动

更新

2 个答案: