如何使 jquery 创建的 div 可拖动？

Question

您好，我想知道是否有创建可拖动 div 的可能解决方案，它是在 java 脚本中创建的，例如：

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=" 图像" 可以拖动，因为我有问题，想知道是否有可能的解决方案。帮助将不胜感激

为了更清楚地说明，我想要一个类似于下面这段代码的方法，它使 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");
  }
});

Answer 1

像这样？

div {
    border: 1px solid;
    width: 200px;
    height: 200px;
    resize: both;
    overflow: auto;
    background: #d2d2d2;
}

<div>
</div>

看看这个：http://www.w3schools.com/cssref/css3_pr_resize.asp

Answer 2

如果您使用 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>

如何使 jquery 创建的 div 可拖动？

How can I make a jquery created div be draggable?

html

javascript

jquery-ui

jquery-ui-draggable

html5-draggable