如何使 jquery 创建的 div 可拖动？
Posted
技术标签:
【中文标题】如何使 jquery 创建的 div 可拖动？【英文标题】：How can I make a jquery created div be draggable? 【发布时间】：2017-05-22 11:03:21 【问题描述】：您好，我想知道是否有一种可能的解决方案来创建一个用 javascript 创建的可拖动 div，例如：
var output = " ";
output+= ' <div class=" image">';
output+= ' <p class="p-id"><strong>' + data.properties[i].id+ '<strong></p>';
output+= '<img class="pic" src="'+ data.staff[i].picture + '"/>';
output+= '</div>';
document.getElementById("right" ).innerhtml = output;
有没有办法让这个 div class=" image" 可拖动，因为我遇到了问题，想知道是否有可能的解决方案。帮助将不胜感激
为了更清楚，我想要一个看起来类似于下面这段代码的方法，它使 java 创建的<div class="image"> 可拖动。
这个方法我试过了：
$(".image ").draggable(
revert:true,
drag:function ()
$(this).addClass("active");
$(this).closest(".class ").addClass("active");
,
stop:function ()
$(this).removeClass("active").closest(".image").removeClass("active");
);
【问题讨论】：
感谢你们所有人，我在 Gerjans 回答的帮助下设法让它工作。也感谢 KujAslani 回答我的问题。 【参考方案1】：如果您使用的是 jQuery-ui，那么您可以在将元素添加到 DOM 之后添加 $('.image').draggable();。
var output = " ";
output+= ' <div class=" image">';
output+= ' <p class="p-id"><strong>#<strong></p>';
output+= '<img class="pic" src="#"/>';
output+= '</div>';
document.getElementById("right" ).innerHTML = output;
$('.image').draggable();.image
width:100px;
height: 100px;
background-color: red;
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
<script
src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"
integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
crossorigin="anonymous"></script>
</head>
<body>
<div id="right"></div>
</body>
</html>【讨论】：
【参考方案2】：像这样？
div
border: 1px solid;
width: 200px;
height: 200px;
resize: both;
overflow: auto;
background: #d2d2d2;
<div>
</div>看看这个：http://www.w3schools.com/cs-s-ref/css3_pr_resize.asp
【讨论】：
我的意思是如果有办法调用 jquery 创建的 div 以便它可以拖动但感谢您的建议 如果这就是您所说的“可拖动”。如果您希望能够拖动整个框，请查看@Gerjan 的答案。以上是关于如何使 jquery 创建的 div 可拖动？的主要内容，如果未能解决你的问题，请参考以下文章