Quote Originally Posted by xelawho View Post
no, hard to say from here... you mean the disappearing apple thing, or something else isn't working?
She just fixed it. It was the touchend function. here is the solution she came up with

Code:
var dragndrop = (function() {
var myX = '';
var myY = '';
var whichArt = '';
var dropTarget = document.querySelector('.bag_graphic');
var draggables = document.querySelector('.draggables');


function getXPosition(element){
var xPosition = 0;

while(element) {
xPosition +=(element.offsetLeft - element.scrollLeft + element.clientLeft);
element = element.offsetParent;
}

return {x: xPosition};
}

function getYPosition(element){
var yPosition = 0;

while(element) {
yPosition +=(element.offsetTop - element.scrollTop + element.clientTop);
element = element.offsetParent;
}

return {y: yPosition};
}
var xDragPosition = getXPosition(draggables);
var yDragPosition = getYPosition(draggables);
var xTargPosition = getXPosition(dropTarget);
var yTargPosition = getYPosition(dropTarget);
var targetWidth = xTargPosition + '390px';
var targetHeight = yTargPosition + '522px';

function resetZ(){
var elements = document.querySelectorAll('img');
for (var i = elements.length - 1; i >= 0; i--) {
elements[i].style.zIndex = 5;
};
}

function moveStart(e) {
whichArt = e.target;
myX = e.offsetX === undefined ? e.layerX : e.offsetX;
myY = e.offsetY === undefined ? e.layerY : e.offsetY;
resetZ();
whichArt.style.zIndex = 10;
}

function moveDragOver(e) {
e.preventDefault();
}

function moveDrop(e) {
e.preventDefault();
whichArt.style.left = e.pageX - myX + 'px';
whichArt.style.top = e.pageY - myY + 'px';
dropOnTarget();
}

/*function dropOnTarget() {
if(( xDragPosition >= xTargPosition && xDragPosition <=targetWidth ) && ( yDragPosition >= yTargPosition && yDragPosition <= targetHeight)){
whichArt.style.display="none";
} else {
whichArt.style.display="block";
}

}*/

function touchStart(e){
e.preventDefault();
var whichArt = e.target;
var touch = e.touches[0];
var moveOffsetX = whichArt.offsetLeft - touch.pageX;
var moveOffsetY = whichArt.offsetTop - touch.pageY;
resetZ();
whichArt.style.zIndex = 10;

whichArt.addEventListener('touchmove', function(){
var positionX = touch.pageX + moveOffsetX;
var positionY = touch.pageY + moveOffsetY;
whichArt.style.left = positionX + 'px';
whichArt.style.top = positionY + 'px';
}, false);
   
whichArt.addEventListener('touchend', function(){
if(( xDragPosition >= xTargPosition && xDragPosition <=targetWidth ) && ( yDragPosition >= yTargPosition && yDragPosition <= targetHeight)){
whichArt.style.display="none";
} else {
whichArt.style.display="block";
}
}, false);
}

document.querySelector('.lvl_2_content').addEventListener('dragstart', moveStart, false);
document.querySelector('.lvl_2_content').addEventListener('dragover', moveDragOver, false);
document.querySelector('.lvl_2_content').addEventListener('drop', moveDrop, false);

document.querySelector('.lvl_2_content').addEventListener('touchstart', touchStart, false);

})();
Everything is working perfectly now.