jquery - jQuery UI Draggable 不适用于子元素
问题描述
div
我的目标是在更大的区域内创建一个框(一个元素) div
(我们称之为“画布”,但不要与 HTML 的画布元素混淆),并让用户可以将它们拖到画布区域的各个部分。可以通过单击链接(<a>
标签)来创建框。
我面临两个问题:
- 网站第一次加载时,按下链接确实会在几分之一秒内显示该框,但会清除画布。我需要再次按下链接,该框才会出现并保留在画布上。我添加
{revert: false}
为输入draggable()
但没有解决它。 - 出现的框是不可拖动的。
我不确定我错在哪里。
$(function() {
$(".dropdown-btn").click(function() {
$(".canvas").append('<div class="indi-box"><div>Indicator</div><form><select id="dropdown"><option value="1">1</option><option value="2">2</option></select></form><div>');
});
$(".indi-box").draggable({
revert: false
});
});
.canvas {
height: 50vw;
width: 90vw;
background-color: powderblue;
border: 2px solid grey;
}
.indi-box {
background-color: #336DFF;
display: inline-block;
padding: 0.5em;
margin: 2px;
}
#dropdown {
margin: 15px;
}
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<body>
<a href="#" class="dropdown-btn">Create Box</a>
<div class="canvas"></div>
</body>
解决方案
它不起作用,因为具有类的元素indi-box
不存在时
$(".indi-box").draggable({
revert: false
});
试试这个:
$(".dropdown-btn").click(function() {
$(".canvas").append('<div class="indi-box"><div>Indicator</div><form><select id="dropdown"><option value="1">1</option><option value="2">2</option></select></form><div>');
$(".indi-box").draggable({
revert: false
});
});
推荐阅读
- javascript - 返回函数并作为表达式分配给变量的函数调用问题
- sql-server - 授予 SQL Sever 访问权限以连接到网络共享 - 无域
- android - 如何从 strings.xml 获取 DB sqlite 数据,所以当我更改语言环境时,所有数据都可以翻译
- java - 如何在没有鼠标/拖动/等的情况下切换到新场景。事件?
- django - Django 计数嵌套的 ManyToManyField 对象
- c# - 如果另一个已经在运行,.net 核心块特定的 BackgroundService
- php - Array_splice “剪切和粘贴”一个元素
- keras - 张量流中的卷积混合密度网络
- c - 尝试在 C 中使用 Net-SNMP 时出现 LINK2019 错误
- python - 有没有解决方案来调整 3d 数据的大小而不会使数据变得混乱?