JavaScriptでドラッグアンドドロップで並び替え

前提・実現したいこと

JavaScriptでドラッグアンドドロップの機能をつかって英語の並び替えをしたいのですが
英語の並べ替えが正解だったら正解と表示するようにしたいです。
また、今現在のプログラムだと並べ替えの順番が毎回同じなので、それをランダムにしたいです。どなたか教えてください。
並べ替えの答えは
I sometimes watch movies on Sunday .
です。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

JavaScript
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2<html>
3<head>
4  <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
5<title>ドラッグアンドドロップ 2</title>
6<SCRIPT>
7var NBOXES = 7;  // 箱の数
8var mousePressed = false; // マウスボタンが押されている?
9var canvas, gc;
10var w, h;
11var boxes;
12var selectedBox = -1; // ドラッグ中の箱の配列番号．ドラッグ中でない時は -1
13var mouseX0, mouseY0; // マウスボタンの前回の位置
14
15window.onload = lqBoard;
16
17function lqBoard() {
18	canvas = document.getElementById('canvas');
19    gc = canvas.getContext('2d');
20    canvas.addEventListener('touchmove', mouseMove);
21    canvas.addEventListener('mousemove', mouseMove);
22    canvas.addEventListener('touchstart', mouseDown);
23    canvas.addEventListener('mousedown', mouseDown);
24    canvas.addEventListener('touchend', mouseUp);
25    canvas.addEventListener('mouseup', mouseUp);
26    boxes = new Boxes();
27    paint(gc);
28}
29
30function paint(g) {
31	w = g.canvas.width;
32	h = g.canvas.height
33   	boxes.draw(g, w, h);
34}
35
36function repaint() {
37    paint(gc);
38}
39
40function dispStatus(type, x, y) {
41	document.status.type.value = type;
42	document.status.x.value = x;
43	document.status.y.value = y;
44	document.status.selected.value = selectedBox;
45}
46
47function mouseDown(e) { // マウスボタンを押したとき
48	if (e.type == "mousedown") {
49		x = e.offsetX;
50		y = e.offsetY;
51	} else {
52		x = parseInt(e.changedTouches[0].pageX);
53		y = parseInt(e.changedTouches[0].pageY);
54	} 
55	//console.log("x = "+ x +", y = "+ y);
56	mousePressed = true;
57	selectedBox = boxes.getSelectedBox(x, 25); // touchの座標はcanvasではないため，yは使わない
58	dispStatus(e.type, x, y);
59	//console.log("box["+ selectedBox +"] is selected");
60	repaint();
61}
62
63function mouseUp(e) { // マウスボタンを離したとき
64	if (e.type == "mouseup") {
65		x = e.offsetX;
66		y = e.offsetY;
67	} else {
68		x = parseInt(e.changedTouches[0].pageX);
69		y = parseInt(e.changedTouches[0].pageY);
70	} 
71	dispStatus(e.type, x, y);
72	//console.log("x = "+x+", y = "+y);
73	mousePressed = false;
74	selectedBox = -1;
75	repaint();
76}
77
78function mouseMove(e) { // マウスを移動したとき
79	if (e.type == "mousemove") {
80		x = e.offsetX;
81		y = e.offsetY;
82	} else {
83		x = parseInt(e.changedTouches[0].clientX);
84		y = parseInt(e.changedTouches[0].clientY);
85	} 
86	dispStatus(e.type, x, y);
87	//console.log("x = "+x+", y = "+y);
88	if (boxes.check(x, y, mouseX0, mouseY0)) repaint();
89	mouseX0 = x;
90	mouseY0 = y;
91}
92
93class Boxes {
94	constructor() {
95		this.b = new Array(NBOXES);
96		var b = this.b;
97		var h = 50;
98		b[0] = new Box("Sunday",   0, 0, 100, h);
99		b[1] = new Box("watch",  100, 0, 80, h);
100		b[2] = new Box("on", 180, 0, 50, h);
101        b[3] = new Box("movies", 230, 0, 100, h);
102        b[4] = new Box(".", 330, 0, 30, h);
103        b[5] = new Box("I", 360, 0, 30, h);
104        b[6] = new Box("sometimes", 390, 0, 130, h);
105	}
106
107	draw(g, w, h) {
108        g.fillStyle = 'gray';
109        g.fillRect(0, 0, w, h);
110		for (var i = 0; i < NBOXES; i++) {
111	        if (selectedBox != i) this.b[i].draw(g); // ドラッグ中の箱は最後に描く
112	    }
113		if (selectedBox > -1) this.b[selectedBox].draw(g);
114	}
115
116	check(x, y, mouseX0, mouseY0) {
117		var rv = false; // 状態が変化していれば true
118		var b = this.b;
119		if (selectedBox > -1) { // ドラッグ中
120			this.b[selectedBox].move(x - mouseX0); // 現在は左右移動のみ
121			return true;
122		}
123		for (var i = 0; i < NBOXES; i++) {
124	        if(this.b[i].isChange(x, y)) rv = true;
125	    }
126		return rv;
127	}
128	getSelectedBox(x, y) {
129		for (var i = 0; i < NBOXES; i++) {
130	        if(this.b[i].isOver(x, y)) return i;
131	    }
132		return -1;
133	}
134}
135
136class Box {
137	constructor(string, x, y, w, h) {
138		this.label = string;
139		this.x = x; // 左上のx座標
140		this.y = y; // 左上のy座標
141		this.w = w; // 幅
142		this.h = h; // 高さ
143		this.over = false;
144	}
145	
146	draw(g) {
147		g.fillStyle ='white';
148		if (mousePressed && this.over) { // ドラッグ中
149			g.fillStyle = 'yellow';
150			mouseX0;
151		}
152		g.fillRect(this.x+1, this.y+1, this.w-2, this.h-2);
153		g.fillStyle = 'black';
154		if (this.over)	g.fillStyle = 'red';
155		g.font = "24px serif";
156		g.fillText(this.label, this.x + 10, this.y + 42);
157	}
158	
159	isChange(x, y) {
160		// 戻り値は this.over の状態が変化したら true，同じなら false
161		if (this.isOver(x, y))
162			if (!this.over) return this.over = true;
163			else return false;
164		else if (this.over) {
165			this.over = false;
166			return true;
167		}
168		return false;
169	}
170	
171	isOver(x, y) {
172		// (x, y) がこのboxの範囲内 なら true でなければ false を返す
173		return (x > this.x) && (x < this.x + this.w) &&
174			(y > this.y) && (y < this.y+this.h);
175	}
176	
177	move(x) {
178		this.x += x;
179	}
180}
181</SCRIPT>
182</head>
183<BODY BGCOLOR="#FFFFC0">
184<H2>ドラッグアンドドロップ 2</H2>
185箱をドラッグアンドドロップで並び替える<br>
186・ドラッグで移動<br>
187・次は他の箱も動かす<br>
188・最後にドロップで配置<br>
189    <canvas id="canvas" width="600" height="50" style="background-color:white;">
190    </canvas><br><br><br>
191<FORM NAME="status">
192event.type = <INPUT TYPE = "text" NAME = "type" SIZE = 8 VALUE = "0">
193x = <INPUT TYPE = "text" NAME = "x" SIZE = 4 VALUE = "0">
194y = <INPUT TYPE = "text" NAME = "y" SIZE = 4 VALUE = "0"><BR>
195selected = <INPUT TYPE = "text" NAME = "selected" SIZE = 4 VALUE = "0">
196<br>
197</FORM>
198既知のバグ<br>
199選択中に上下にマウスを動かしてcanvasから出ると，<br>
200字の色や塗りつぶしの色が元に戻らない．
201</body>
202</html>

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

yambejp

2021/11/15 01:04

canvasの使用はマストなのでしょうか？テキスト処理ですからdivとかの方が楽そうですが

Ciel217

2021/11/15 07:27

いえ、元々あったものを少し変えただけなので、楽なものがあればそちらで教えてほしいです。

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1<style>
2#view{display:flex;}
3#view div{border:solid 1px;padding:0px 2px 0px 2px ;}
4#view div:not(:first-child){border-left:solid 0px;}
5</style>
6
7<script>
8window.addEventListener('DOMContentLoaded', ()=>{
9  const q="I sometimes watch movies on Sunday .";
10  const view=document.querySelector('#view');
11  q.split(' ')
12    .map(x=>[x,Math.random()])
13    .sort((x,y)=>x[1]-y[1])
14    .map(x=>x[0])
15    .forEach(x=>view.append(Object.assign(document.createElement('div'),{textContent:x})));
16  view.addEventListener('dragover',e=>e.preventDefault());
17  var t=null;
18  view.querySelectorAll('div').forEach(x=>{
19    x.setAttribute("draggable","true");
20    x.addEventListener('drop',e=>{
21      view.insertBefore(t,x.nextElementSibling);
22      const a=[...view.querySelectorAll('div')].map(x=>x.textContent).join(' ');
23      if(q==a){
24        alert('ok!');
25      }
26    });
27    x.addEventListener('dragstart',e=>{
28      t=e.target;
29    });
30  });
31});
32</script>
33<div id="view"></div>