WebKit：如何在拖动动画 div 时确定哪些元素处于触摸状态答案

【问题标题】：WebKit: How to determine what elements are under a touch while dragging an animating divWebKit：如何在拖动动画 div 时确定哪些元素处于触摸状态
【发布时间】：2013-05-20 16:24:52
【问题描述】：

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

基本上，我想在播放循环 CSS 动画时通过触摸拖动 div。我还想确定它何时高于放置目标并做一些特别的事情。

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

如何在每次查询时在不重置 CSS 动画的情况下确定我在上方拖动的内容？

JSFiddle 在 WebKit 中使用触摸事件。

HTML 在每次 touchmove 时，我都会移动 drag 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);
    }
}

【问题讨论】：

为什么不使用拖动事件？ html5rocks.com/en/tutorials/dnd/basics
它应该无法在移动设备上运行...caniuse.com/#feat=dragndrop

标签： javascript multi-touch css-animations

【解决方案1】：

您可能可以设置pointer-events: none，然后设置pointer-events: auto，但这似乎很老套。更好的选择是有一个交集函数：

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/

【讨论】：