gpt4 book ai didi

javascript - 网络工具包 : How to determine what elements are under a touch while dragging an animating div

转载 作者:行者123 更新时间:2023-11-28 09:08:12 26 4
gpt4 key购买 nike

我正在尝试为 Mobile Safari 实现拖放功能。

基本上,我想在播放循环 CSS 动画时通过触摸拖动 div。我还想确定它何时高于放置目标并执行一些特殊操作。

我使用 elementFromPoint 来确定在 touchmove 事件中我的 div 被拖动到哪些元素。但是,拖动的 div 始终是最上面的元素。所以在查询之前,我将其设置为display: none。但是,这会在触摸移动的每一帧中重置我的动画。

如何确定我在上面拖动的内容,而无需每次查询时重置 CSS 动画?

JSFiddle在 WebKit 中使用触摸事件。

HTML 在每次触摸移动时,我都会移动拖动 div。

<div id='drop'>Drop here</div>
<div id='drag'>Drag me</div>

JavaScript

var drag = document.getElementById('drag');
var drop = document.getElementById('drop');

drag.addEventListener('touchmove', move, true);

function move(e) {
var touch = e.changedTouches[0];
drag.style.left = touch.pageX - 25 + 'px';
drag.style.top = touch.pageY - 25 + 'px';

drag.style.display = 'none';
if (drop === document.elementFromPoint(touch.pageX, touch.pageY)) {
drag.classList.add('in-drop-zone');
} else {
drag.classList.remove('in-drop-zone');
}
drag.style.display = 'inline';
}

CSS

div {
position: absolute;
}

div#drag {
width: 50px;
height: 50px;
background-color: blue;
-webkit-transform-origin: 50% 50%;
-webkit-animation: sway 1s infinite alternate;
}

div#drop {
width: 100px;
height: 100px;
background-color: green;
left: 200px;
top: 200px;
}

div#drag.in-drop-zone {
background-color: yellow;
}

@-webkit-keyframes sway {
from {
-webkit-transform: rotate(-30deg);
}
to {
-webkit-transform: rotate(30deg);
}
}

最佳答案

您可能可以设置pointer-events: none,然后设置pointer-events: auto,但这看起来很hacky。更好的选择是有一个交集函数:

var drag = document.getElementById('drag');
var drop = document.getElementById('drop');
var drop_bbox = drop.getBoundingClientRect();

window.addEventListener('touchmove', move, true);
window.addEventListener('mousemove', move, true);

function move(e) {
drag.style.left = e.clientX - 25 + 'px';
drag.style.top = e.clientY - 25 + 'px';
var drag_bbox = e.target.getBoundingClientRect();
drag.className = rectsIntersect(drag_bbox, drop_bbox) ? "in-drop-zone" : null;
}

function rectsIntersect(r1, r2) {
if (!r1 || !r2) return false;
return r2.left < (r1.left+r1.width) &&
(r2.left+r2.width) > r1.left &&
r2.top < (r1.top+r1.height) &&
(r2.top+r2.height) > r1.top;
};

这是一个 JSFiddle http://jsfiddle.net/duopixel/SvPpw/

关于javascript - 网络工具包 : How to determine what elements are under a touch while dragging an animating div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16642454/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com