javascript - Javascript - 选择标签在 Draggable Parent 中不起作用
问题描述
我有一个可拖动的父级,其中有选择标签。父级完全可拖动,但可拖动父级中存在的选择标签未打开
这是问题的jsfiddle链接请建议我应该怎么做才能在这种情况下打开选择PFB代码:
<!DOCTYPE HTML>
<html>
<head>
<style>
#myModal {
position: absolute;
z-index: 9; height: 200px; width: 200px;
background-color: #f1f1f1;
text-align: center;
border: 1px solid #d3d3d3;
top: 0;
right: 0;}
#myModalheader {
padding: 10px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;}
</style>
<script>
function ready() {
dragElement(document.getElementById("myModal"));
}
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id)) {
document.getElementById(elmnt.id).onmousedown = dragMouseDown;}
else {elmnt.onmousedown = dragMouseDown;}
function dragMouseDown(w) {
w = w || window.event;
w.preventDefault();
pos3 = w.clientX;
pos4 = w.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;}
function elementDrag(w) {
w = w || window.event;
w.preventDefault();
pos1 = pos3 - w.clientX;
pos2 = pos4 - w.clientY;
pos3 = w.clientX;
pos4 = w.clientY;
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;}}
document.addEventListener("DOMContentLoaded", ready);
</script>
</head>
<body>
<div id="myModal">
<div id="myModalheader">Click here to move</div>
<p>Move</p><p>this</p><p>DIV</p>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
</body>
</html>
解决方案
你的问题在这里:
function dragMouseDown(w) {
w = w || window.event;
w.preventDefault();
pos3 = w.clientX;
pos4 = w.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
如果您阻止默认操作,请删除(这会告诉用户代理,如果未明确处理事件,则不应像通常那样采取其默认操作),您会没事的。w.preventDefault();
function dragMouseDown(w) {
w = w || window.event;
pos3 = w.clientX;
pos4 = w.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
推荐阅读
- firebase - 从 auth firebase、firestore 和 firebase 函数到 getStream.io 聊天的最佳工作流程
- php - 如何使用codeigniter文件上传将图像从子域文件夹上传到public_html中的文件夹?
- linux - 在小时:分钟:[毫秒]内执行 crontab linux
- javascript - 为 donut chart.js 的标签徽章添加百分比
- docker - Docker Windows 安装失败/库未注册 [Windows 10 Pro]
- flutter - 显示 alertDialog 时 Flutter 键盘消失
- python - 如何以优雅的功能将 pandas DataFrames 导出到 Excel 文件?
- c# - 如何根据输入参数从 c# 动态创建 powershell 脚本,而机器中没有物理脚本文件
- maven - 使用 Maven 运行 java 项目时出现 Stripe.apiKey 错误
- python - 从两个下拉菜单中选择后显示输出