diff --git a/js/drag-and-drop.js b/js/drag-and-drop.js index fbcc212..9bb272b 100644 --- a/js/drag-and-drop.js +++ b/js/drag-and-drop.js @@ -3,64 +3,60 @@ gomibako.style.zIndex = "1"; var moveObjs = document.querySelectorAll("moveObj"); for(obj of moveObjs){ - obj.addEventListener('click', objset(obj), false) - obj.style.position = "absolute"; - obj.style.cursor = "pointer"; - obj.style.zIndex = "2"; - } - var moveObj = null; - - function objset(obj){ - moveObj = obj; + obj.addEventListener('click', moveObjset(obj), false) } - /*moveObj.style.position = "absolute"; - moveObj.style.cursor = "pointer"; - moveObj.style.zIndex = "2";*/ + function moveObjset(obj){ + var moveObj = obj; - var w1 = document.body.clientWidth; //画像がマウスの位置からズレるとマウスを離した時のイベントが機能しなかったため、ウィンドウのサイズからずれを修正 - var h1 = document.body.clientHeight; - /*moveObj.ondragstart = function(e){ - return false; - }*/ + moveObj.style.position = "absolute"; + moveObj.style.cursor = "pointer"; + moveObj.style.zIndex = "2"; - function onMouseMove(event){ - var x = event.clientX; - var y = event.clientY; - var width = moveObj.offsetWidth; - var height = moveObj.offsetHeight; - moveObj.style.top = y-(w1/10) + "px"; //位置(上下)が変化 - moveObj.style.left = x-(h1/10) + "px"; //位置(左右)が変化 - console.log(x + ", " + y + ", " + width + ", " + height); - /*var gomibakoRect = gomibako.getBoundingClientRect(); - if((x>=gomibakoRect.left && x<=(gomibakoRect.left+gomibakoRect.width)) && (y>=gomibakoRect.top && y<=(gomibakoRect.top+gomibakoRect.height))){ - gomibako.style.backgroundColor = "pink"; + var w1 = document.body.clientWidth; //画像がマウスの位置からズレるとマウスを離した時のイベントが機能しなかったため、ウィンドウのサイズからずれを修正 + var h1 = document.body.clientHeight; + moveObj.ondragstart = function(e){ + return false; } - else{ - gomibako.style.backgroundColor = "white"; - }*/ - } - moveObj.onmousedown = function(event){ - console.log(moveObj + "にマウスがくっついた"); - w1 = document.body.clientWidth; - h1 = document.body.clientHeight; - document.addEventListener("mousemove",onMouseMove); - } + function onMouseMove(event){ + var x = event.clientX; + var y = event.clientY; + var width = moveObj.offsetWidth; + var height = moveObj.offsetHeight; + moveObj.style.top = y-(w1/10) + "px"; //位置(上下)が変化 + moveObj.style.left = x-(h1/10) + "px"; //位置(左右)が変化 + console.log(x + ", " + y + ", " + width + ", " + height); + /*var gomibakoRect = gomibako.getBoundingClientRect(); + if((x>=gomibakoRect.left && x<=(gomibakoRect.left+gomibakoRect.width)) && (y>=gomibakoRect.top && y<=(gomibakoRect.top+gomibakoRect.height))){ + gomibako.style.backgroundColor = "pink"; + } + else{ + gomibako.style.backgroundColor = "white"; + }*/ + } - moveObj.onmouseup = function(event){ - console.log(moveObj + "からマウスが離れた"); - /*var x = event.clientX; - var y = event.clientY; - var width = moveObj.offsetWidth; - var height = moveObj.offsetHeight; - console.log(x + ", " + y + ", " + width + ", " + height); - /*var gomibakoRect = gomibako.getBoundingClientRect(); - if((x>=gomibakoRect.left && x<=(gomibakoRect.left+gomibakoRect.width)) && (y>=gomibakoRect.top && y<=(gomibakoRect.top+gomibakoRect.height))){ - gomibako.style.backgroundColor = "white"; - moveObj.classList.add('hidden'); - }*/ - document.removeEventListener("mousemove",onMouseMove); + moveObj.onmousedown = function(event){ + console.log(moveObj + "にマウスがくっついた"); + w1 = document.body.clientWidth; + h1 = document.body.clientHeight; + document.addEventListener("mousemove",onMouseMove); + } + + moveObj.onmouseup = function(event){ + console.log(moveObj + "からマウスが離れた"); + /*var x = event.clientX; + var y = event.clientY; + var width = moveObj.offsetWidth; + var height = moveObj.offsetHeight; + console.log(x + ", " + y + ", " + width + ", " + height); + /*var gomibakoRect = gomibako.getBoundingClientRect(); + if((x>=gomibakoRect.left && x<=(gomibakoRect.left+gomibakoRect.width)) && (y>=gomibakoRect.top && y<=(gomibakoRect.top+gomibakoRect.height))){ + gomibako.style.backgroundColor = "white"; + moveObj.classList.add('hidden'); + }*/ + document.removeEventListener("mousemove",onMouseMove); + } } } draganddrop(); \ No newline at end of file