javascript - 为什么两个DIV不能在父DIV下拖动?
问题描述
我已经根据项目要求编写了一些代码,其中我需要提供让用户编写的注释。
笔记是可拖动的,可以在某些区域移动。
当我尝试添加多个音符时,只有一个音符可以拖动,其余的不能拖动。
笔记在 parent 下DIV
。每个音符都有自己的DIV
. 请指出我的错误并指导我。谢谢你。
$(function () {
$("#draggable").draggable({
containment : 'parent',
handle: "p",
start: function (event, ui) {
$(this).css('background-color', 'rgb(221, 251, 120);');
},
stop: function (event, ui) {
$(this).css('background-color', 'rgb(227, 250, 150)');
}
});
$("div, p").disableSelection();
});
.wrap {
width: 77vw;
height: 87vh;
}
#draggable{
width: 300px;
height: 300px;
position: absolute;
background: rgb(227, 250, 150);
border: none;
border-radius: 5px 5px 0px 0px;
}
#draggable p {
cursor: move;
}
#draggable-header p{
background: rgb(80, 80, 80);
height: 30px;
width: 300px;
color: white;
font-weight: 500;
padding: 5px;
border-radius: 5px 5px 0px 0px;
}
#draggable textarea{
background: transparent;
resize: none;
padding: 5px;
padding-left: 10px;
width: 300px;
height: 300px;
border: none;
font-weight: 500;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
crossorigin="anonymous"></script>
<div class="wrap">
<div id="draggable" class="ui-widget-content">
<div id="draggable-header">
<p class="ui-widget-header">Note name1</p>
</div>
</div>
<div>
<textarea placeholder="Message" id="w3review" class="ui-widget-header" name="w3review" rows="1" cols="2"></textarea>
</div>
<div id="draggable" class="ui-widget-content">
<div id="draggable-header">
<p class="ui-widget-header">Note name2</p>
</div>
</div>
<div>
<textarea placeholder="Message" id="w3review" class="ui-widget-header" name="w3review" rows="1" cols="2"></textarea>
</div>
</div>
解决方案
在 html 中的 ID 应该是唯一的,你不能对一个以上的元素使用相同的 ID。
将您的选择器从更改$("#draggable").draggable({
为$(".ui-widget-content").draggable({
这将正常工作。
$(function () {
$(".ui-widget-content").draggable({
containment : 'parent',
handle: "p",
start: function (event, ui) {
$(this).css('background-color', 'rgb(221, 251, 120);');
},
stop: function (event, ui) {
$(this).css('background-color', 'rgb(227, 250, 150)');
}
});
$("div, p").disableSelection();
});
在这里检查工作小提琴
推荐阅读
- apache-kafka - Kafka 指标 RequestHandlerAvgIdlePercent
- javascript - ES6 - 使用 javascript es6 从基于键名的数组创建新数组
- multithreading - Azure 中的多线程
- c# - 基于 Azure 类的持久实体实例的生命周期
- snowflake-cloud-data-platform - 如何从 Snowflake 的同一张表中提取当年和上一年的数据?
- reactjs - 从 LocalHost 获取数据并使用 React Js 显示数据
- php - 在我的帐户页面的编辑帐单和送货地址部分显示自定义字段数据的预览
- c# - 如何使用 API 和 c# 将文件从 azure DevOps 服务器下载到指定路径
- c# - 我想将 Javascipt 对象传递给 c# 方法,而无需在 Mono 或 Blazor 中进行序列化
- keycloak - Keycloak:如何仅通过身份提供者登录