如何解决拖动带有表格的图层
我正在尝试在 PC 平台和移动设备上拖动图层。我可以做到这一点,但有以下问题。当表格在 内时,我无法从表格内拖动。表格将与图层一起拖动,但前提是在表格外单击。我的代码片段突出显示了这个问题。
// Works with mobile
var dragItem = document.getElementById("item");
var container = document.getElementById("container");
var active = false;
var currentX;
var currentY;
var initialX;
var initialY;
var xOffset = 0;
var yOffset = 0;
container.addEventListener("touchstart",dragStart,false);
container.addEventListener("touchend",dragEnd,false);
container.addEventListener("touchmove",drag,false);
container.addEventListener("mousedown",false);
container.addEventListener("mouseup",false);
container.addEventListener("mousemove",false);
function dragStart(e) {
if (e.type === "touchstart") {
initialX = e.touches[0].clientX - xOffset;
initialY = e.touches[0].clientY - yOffset;
} else {
initialX = e.clientX - xOffset;
initialY = e.clientY - yOffset;
}
if (e.target === dragItem) {
active = true;
}
}
function drag(e) {
if (active) {
e.preventDefault();
if (e.type === "touchmove") {
currentX = e.touches[0].clientX - initialX;
currentY = e.touches[0].clientY - initialY;
} else {
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
}
xOffset = currentX;
yOffset = currentY;
setTranslate(currentX,currentY,dragItem);
}
}
function setTranslate(xPos,yPos,el) {
el.style.transform = "translate3d(" + xPos + "px," + yPos + "px,0)";
}
function dragEnd(e) {
initialX = currentX;
initialY = currentY;
active = false;
}
#outerContainer {
position: absolute;
width: 400px;
height: 300px;
left: 200px;
top: 100px;
background-color: #ff0000;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 200px;
touch-action: none;
}
#container {
position: absolute;
width: 200px;
height: 200px;
background-color: #ffffff;
z-index: 1;
display: flex;
order: inherit;
zindex: 200;
align-items: center;
justify-content: center;
overflow: hidden;
touch-action: none;
}
#table1 {
display: flex;
width: 200;
border: 2;
align: center;
}
#item {
width: 150px;
height: 150px;
background-color: #333333;
z-index: 5;
display: flex;
cursor: move;
justify-content: center;
touch-action: none;
user-select: none;
}
#item:active {
background-color: rgba(168,218,220,1.00);
}
#item:hover {
cursor: move;
}
body {
background-color: #000000;
}
<div id="outerContainer" style="position:absolute; z-index:100">
<div id="container" style="position:absolute; z-index:10">
<div id="item" style="position:absolute; z-index:1">
<br/>Can drag from here<br/>and from here
<br/>
<table id="table1" border="2" bgcolor="#00CC66">
<tr>
<td>This is in the table</td>
</tr>
<tr>
<td>Cannot drag from here</td>
</tr>
</table>
</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。