WebKit : 움직이는 div를 드래그하는 동안 터치중인 요소를 확인하는 방법

Question

모바일 Safari의 끌어서 놓기를 구현하려고합니다.

기본적으로 반복적 인 CSS 애니메이션을 재생하면서 터치를 통해 div를 드래그하려고합니다. 나는 또한 그것이 드롭 타겟보다 높을 때를 결정하고 특별한 것을하고 싶다.

내 사업부가 하는 TouchMove 이벤트에 이상 끌고있는 어떤 요소를 결정하기 위해 elementFromPoint을 사용하고 있습니다. 그러나 드래그 된 div는 항상 최상위 요소입니다. 그래서 쿼리하기 전에, 나는 display : none으로 설정했다. 그러나 이것은 터치가 움직이는 모든 프레임마다 애니메이션을 재설정하는 효과가 있습니다.

내가 쿼리 할 때마다 내 CSS 애니메이션을 재설정하지 않고 위에서 드래그 한 것을 어떻게 결정합니까?

JSFiddle WebKit에서 터치 이벤트를 사용합니다.

HTML 모든 터치 이동시에 을 드래그 div로 이동합니다.

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

자바 스크립트

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 당신은 아마 다음 pointer-events: autopointer-events: none 등을 설정할 수 있습니다,하지만 꽤 해키 보인다

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

. 여기

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/