otaku-tokyo

 

Drag&Drop

ほか

リストの並び替えだけならこっちの方が簡単そう【https://blog.ver001.com/javascript-dragdrop-sort/】

英語学習アプリとかでありそうなやつ

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>balltest</title>
<script src=”https://code.jquery.com/jquery-3.6.0.min.js” integrity=”sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=” crossorigin=”anonymous”></script>
<style>
.gomibako{
background: #f2f2f2;
border-radius: 5px;
height: 40px;
line-height: 40px;
margin: 5px;
text-align: center;
width: 100px;
}
.button__answer{
border-radius: 5px;
display: block;
font-weight: bold;
height: 40px;
line-height: 40px;
margin: 20px 0;
text-align: center;
width: 100%;
}
.elements{
background: #fff;
box-shadow: 0 1px 1px 1px #e3e3e3;/* 左右、上下、ぼかし、広がり、色、内側指定 */
border-radius: 5px;
height: 40px;
line-height: 40px;
margin: 5px;
position: absolute;
text-align: center;
width: 100px;
}
.elements__wrapper{
background-color: #4682b4;
border-radius: 3px;
/* display: flex; */
height: 50px;
position: relative;
}
</style>
</head>
<body>
<div>
<p>「このペン」を英語に直して下さい。</p>
<div style=”display: flex; margin-bottom: 30px;”>
<div class=”gomibako”></div>
<div class=”gomibako”></div>
</div>
<div class=”elements__wrapper”>
<div class=”elements” style=”top: 0; left: 5%;”>pen</div>
<div class=”elements” style=”top: 0; left: 20%;”>this</div>
</div>
<button class=”button__answer”>答え合わせ</button>
<div class=”result”></div>
</div>
<script>
$(document).ready(function(){
var elements = document.getElementsByClassName(“elements”);
var x;
var y;

for(var i = 0; i < elements.length; i++) {
elements[i].addEventListener(“mousedown”, mdown, false);
elements[i].addEventListener(“touchstart”, mdown, false);
}
function mdown(e) {
this.classList.add(“drag”);
if(e.type === “mousedown”) { var event = e; } else { var event = e.changedTouches[0];}
x = event.pageX – this.offsetLeft;
y = event.pageY – this.offsetTop;
document.body.addEventListener(“mousemove”, mmove, false);
document.body.addEventListener(“touchmove”, mmove, false);
}
function mmove(e) {
var drag = document.getElementsByClassName(“drag”)[0];
if(e.type === “mousemove”) { var event = e; } else { var event = e.changedTouches[0]; }
e.preventDefault();
drag.style.top = event.pageY – y + “px”;
drag.style.left = event.pageX – x + “px”;
//マウスボタンが離されたとき、またはカーソルが外れたとき発火
drag.addEventListener(“mouseup”, mup, false);
drag.addEventListener(“touchend”, mup, false);
document.body.addEventListener(“mouseleave”, mup, false);
document.body.addEventListener(“touchleave”, mup, false);
}
function mup(e) {
var drag = document.getElementsByClassName(“drag”)[0];
console.log( drag );
var gomibako = document.getElementsByClassName(“gomibako”);
for ( i = gomibako.length – 1; i >= 0; i– ) {
var gomibakoRect = gomibako[i].getBoundingClientRect();
var s = event.clientX;
var t = event.clientY
if((s>=gomibakoRect.left && s<=(gomibakoRect.left+gomibakoRect.width)) && (t>=gomibakoRect.top && t<=(gomibakoRect.top+gomibakoRect.height))){
// var app = document.getElementById(“app”);
gomibako[i].textContent = this.textContent;
this.parentNode.removeChild(this);
}
}
//removeEventListenerで特定のイベントと関数のつながりを”全て”断つ
document.body.removeEventListener(“mousemove”, mmove, false);
document.body.removeEventListener(“touchmove”, mmove, false);
drag.removeEventListener(“mouseup”, mup, false);
drag.removeEventListener(“touchend”, mup, false);
document.body.removeEventListener(“mouseleave”, mup, false);
document.body.removeEventListener(“touchleave”, mup, false);
drag.classList.remove(“drag”);
}

$(“.button__answer”).click(function(){
if( $(“.gomibako:first-child”).text() === “this” && $(“.gomibako:last-child”).text() === “pen” ){
$(“.result”).text(“正解です”);
} else {
$(“.result”).text(“不正解です”);
}
});
});
</script>
</body>
</html>