WebKit：如何確定在拖動動畫格時觸摸下的元素

Question

我正在嘗試爲移動Safari執行拖放操作。

基本上我想通過觸摸拖動一個div，同時播放循環的CSS動畫。我也想確定它何時在放置目標之上，並做一些特別的事情。

我使用elementFromPoint，以確定我的div被拖動哪些要素在上touchmove事件。但是，拖動div始終是最頂層的元素。所以在查詢之前，我將它設置爲display：none。但是，這具有在觸摸移動的每一幀重置我的動畫的效果。

如何確定我上面拖動的內容，而不是每次查詢時重置我的CSS動畫？

JSFiddle在WebKit中使用觸摸事件。

HTML在每次touchmove我移動阻力股利。

<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); 
    } 
} 

Answer 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/