質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

解決済

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

Ciel217
Ciel217

総合スコア10

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1回答

0評価

2クリップ

237閲覧

投稿2021/11/14 13:51

編集2021/11/14 14:16

前提・実現したいこと

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

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

エラーメッセージ

該当のソースコード

JavaScript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>ドラッグアンドドロップ 2</title> <SCRIPT> var NBOXES = 7; // 箱の数 var mousePressed = false; // マウスボタンが押されている? var canvas, gc; var w, h; var boxes; var selectedBox = -1; // ドラッグ中の箱の配列番号.ドラッグ中でない時は -1 var mouseX0, mouseY0; // マウスボタンの前回の位置 window.onload = lqBoard; function lqBoard() { canvas = document.getElementById('canvas'); gc = canvas.getContext('2d'); canvas.addEventListener('touchmove', mouseMove); canvas.addEventListener('mousemove', mouseMove); canvas.addEventListener('touchstart', mouseDown); canvas.addEventListener('mousedown', mouseDown); canvas.addEventListener('touchend', mouseUp); canvas.addEventListener('mouseup', mouseUp); boxes = new Boxes(); paint(gc); } function paint(g) { w = g.canvas.width; h = g.canvas.height boxes.draw(g, w, h); } function repaint() { paint(gc); } function dispStatus(type, x, y) { document.status.type.value = type; document.status.x.value = x; document.status.y.value = y; document.status.selected.value = selectedBox; } function mouseDown(e) { // マウスボタンを押したとき if (e.type == "mousedown") { x = e.offsetX; y = e.offsetY; } else { x = parseInt(e.changedTouches[0].pageX); y = parseInt(e.changedTouches[0].pageY); } //console.log("x = "+ x +", y = "+ y); mousePressed = true; selectedBox = boxes.getSelectedBox(x, 25); // touchの座標はcanvasではないため,yは使わない dispStatus(e.type, x, y); //console.log("box["+ selectedBox +"] is selected"); repaint(); } function mouseUp(e) { // マウスボタンを離したとき if (e.type == "mouseup") { x = e.offsetX; y = e.offsetY; } else { x = parseInt(e.changedTouches[0].pageX); y = parseInt(e.changedTouches[0].pageY); } dispStatus(e.type, x, y); //console.log("x = "+x+", y = "+y); mousePressed = false; selectedBox = -1; repaint(); } function mouseMove(e) { // マウスを移動したとき if (e.type == "mousemove") { x = e.offsetX; y = e.offsetY; } else { x = parseInt(e.changedTouches[0].clientX); y = parseInt(e.changedTouches[0].clientY); } dispStatus(e.type, x, y); //console.log("x = "+x+", y = "+y); if (boxes.check(x, y, mouseX0, mouseY0)) repaint(); mouseX0 = x; mouseY0 = y; } class Boxes { constructor() { this.b = new Array(NBOXES); var b = this.b; var h = 50; b[0] = new Box("Sunday", 0, 0, 100, h); b[1] = new Box("watch", 100, 0, 80, h); b[2] = new Box("on", 180, 0, 50, h); b[3] = new Box("movies", 230, 0, 100, h); b[4] = new Box(".", 330, 0, 30, h); b[5] = new Box("I", 360, 0, 30, h); b[6] = new Box("sometimes", 390, 0, 130, h); } draw(g, w, h) { g.fillStyle = 'gray'; g.fillRect(0, 0, w, h); for (var i = 0; i < NBOXES; i++) { if (selectedBox != i) this.b[i].draw(g); // ドラッグ中の箱は最後に描く } if (selectedBox > -1) this.b[selectedBox].draw(g); } check(x, y, mouseX0, mouseY0) { var rv = false; // 状態が変化していれば true var b = this.b; if (selectedBox > -1) { // ドラッグ中 this.b[selectedBox].move(x - mouseX0); // 現在は左右移動のみ return true; } for (var i = 0; i < NBOXES; i++) { if(this.b[i].isChange(x, y)) rv = true; } return rv; } getSelectedBox(x, y) { for (var i = 0; i < NBOXES; i++) { if(this.b[i].isOver(x, y)) return i; } return -1; } } class Box { constructor(string, x, y, w, h) { this.label = string; this.x = x; // 左上のx座標 this.y = y; // 左上のy座標 this.w = w; // 幅 this.h = h; // 高さ this.over = false; } draw(g) { g.fillStyle ='white'; if (mousePressed && this.over) { // ドラッグ中 g.fillStyle = 'yellow'; mouseX0; } g.fillRect(this.x+1, this.y+1, this.w-2, this.h-2); g.fillStyle = 'black'; if (this.over) g.fillStyle = 'red'; g.font = "24px serif"; g.fillText(this.label, this.x + 10, this.y + 42); } isChange(x, y) { // 戻り値は this.over の状態が変化したら true,同じなら false if (this.isOver(x, y)) if (!this.over) return this.over = true; else return false; else if (this.over) { this.over = false; return true; } return false; } isOver(x, y) { // (x, y) がこのboxの範囲内 なら true でなければ false を返す return (x > this.x) && (x < this.x + this.w) && (y > this.y) && (y < this.y+this.h); } move(x) { this.x += x; } } </SCRIPT> </head> <BODY BGCOLOR="#FFFFC0"> <H2>ドラッグアンドドロップ 2</H2> 箱をドラッグアンドドロップで並び替える<br> ・ドラッグで移動<br> ・次は他の箱も動かす<br> ・最後にドロップで配置<br> <canvas id="canvas" width="600" height="50" style="background-color:white;"> </canvas><br><br><br> <FORM NAME="status"> event.type = <INPUT TYPE = "text" NAME = "type" SIZE = 8 VALUE = "0"> x = <INPUT TYPE = "text" NAME = "x" SIZE = 4 VALUE = "0"> y = <INPUT TYPE = "text" NAME = "y" SIZE = 4 VALUE = "0"><BR> selected = <INPUT TYPE = "text" NAME = "selected" SIZE = 4 VALUE = "0"> <br> </FORM> 既知のバグ<br> 選択中に上下にマウスを動かしてcanvasから出ると,<br> 字の色や塗りつぶしの色が元に戻らない. </body> </html>

試したこと

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

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

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

yambejp

2021/11/15 01:04

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

2021/11/15 07:27

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

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。