javascript - 可拖动和可调整大小的 div

<分区>

我正在尝试创建可拖动且可调整大小的 div。现在，如果我在设计时对一个 div 进行硬编码，它就可以工作。但是，如果我在运行时添加 div，则 draggable 不起作用。

/*----------------------*/

. movingDiv { 
    border: 1px solid;
    width: 150px; 
    height: 150px; 
    padding: 0.5em; 
    resize: both;
    overflow: auto;
    position: absolute;
}
/*-----------------*/

.........
.........
 <div id="source">
</div>
<div id="container">    
<div class="movingDiv">
    <p>Drag and resize</p>
</div>
</div>
</body>

<script>
  $("#source").click(function () {
      $("#container").append('<div class="movingDiv"></div>');
    });

  $(".movingDiv").resizable().draggable();
</script>

最佳答案

这是@TimTheEnchanter 已经提出的工作示例:

$("#source").click(function () {
  $("#container").append($('<div class="movingDiv"><p>Drag and resize</p</div>').draggable().resizable());
});

.movingDiv { 
    border: 1px solid;
    width: 150px; 
    height: 150px; 
    padding: 0.5em; 
    overflow: hidden;
    position: absolute;
}

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="source">source</div>
<div id="container">    

</div>

关于javascript - 可拖动和可调整大小的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40567542/

上一篇：javascript - 从通过 jQuery AJAX 调用的 Controller 返回 PDF

下一篇：javascript - Fullpage.js - 水平滚动

相关文章：

html - 图片上有一个奇怪的图标和轮廓

javascript - 在 Highcharts 上添加额外的系列

javascript - 更新服务中的新值

javascript - 我如何编写一个适用于 mousemove 事件的函数并在文档就绪时调用它？

javascript - 在 HTML 中显示 jquery 值

jquery - Kendo MVC Ajax 网格弹出编辑器 : How to show/hide fields dynamically

javascript - 在 Javascript 中拆分时，如何忽略两个已知字符串之间的可变字符串长度？

javascript - 从 javascript 调用 rails 函数

Javascript 动画 : stop doing multiple jumps

css - Youtube iFrame 上下文菜单异常