mousedownとmouseupを使ったDnDについて

押したときにその行の値を取得し、離したときに押した行の値及び離した行の値を表示するということです（最終的にはセル内容の入れ替えをやりたいのですがいまはその準備段階です）。

しかしながら現状、xxxを押し,yyy上で離しても何も起きません。その逆も同じです。どのようにすればよいかご存知の方、よろしくお願い致します。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>drag</title> <script> var val, row; function drag($event, $this) { // マウスダウン行の値を変数val,マウスダウン行の行数を変数rowに格納 if ($event.type == "mousedown") { val = $this.innerHTML; row = $this.parentNode.rowIndex; } else if ($event.type == "mouseup") { // マウスダウンの実績があり、かつ異なる行でのマウスアップ if (row && $this.parentNode.rowIndex != row) { // マウスダウン行の値とマウスアップ行の値を表示 alert(val+"|"+$this.innerHTML); // 初期化 val = ""; row = ""; } else { return; } } } </script> </head> <body> <table> <tr><td onmousedown="drag(event, this);" onmouseup="drag(event, this);" draggable="true">xxx</td></tr> <tr><td onmousedown="drag(event, this);" onmouseup="drag(event, this);" draggable="true">yyy</td></tr> </table> </body> </html>

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

回答1件

ベストアンサー

まず mousedown、upを使ってドラッグ＆ドロップを実現しようとするのであれば、 draggable="true" がいりません。

そうすると、現状だと、yyyの行から、XXXの行で離すと期待した動きをするのではないでしょうか。
xxxからのドラッグが出来ないのは、以下の判定部分がおかしいからです。

// マウスダウンの実績があり、かつ異なる行でのマウスアップ
if (row && $this.parentNode.rowIndex != row) {

row が押されたかチェックするのであれば、rowちゃんと初期化した後にチェックする必要があると思います。
以下のように修正してみました。

lang
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<title>drag</title>
6<script>
7var val, row;
8val = row = "";
9      
10function drag($event, $this) {
11// マウスダウン行の値を変数val,マウスダウン行の行数を変数rowに格納
12  if ($event.type == "mousedown") {
13    val = $this.innerHTML;
14    row = $this.parentNode.rowIndex;
15  } else if ($event.type == "mouseup") {
16// マウスダウンの実績があり、かつ異なる行でのマウスアップ
17    if (row !== "" && $this.parentNode.rowIndex != row) {
18// マウスダウン行の値とマウスアップ行の値を表示
19      alert(val+"|"+$this.innerHTML);
20// 初期化
21      val = "";
22      row = "";
23    } else {
24      return;
25    }
26  }
27}
28</script>
29</head>
30<body>
31<table>
32<tr><td onmousedown="drag(event, this);" onmouseup="drag(event, this);">xxx</td></tr>
33<tr><td onmousedown="drag(event, this);" onmouseup="drag(event, this);" >yyy</td></tr>
34</table>
35</body>
36</html>