HTMLのテキストボックスへのドラッグ＆ドロップについて

質問

HTMLのテキストボックスに文字列(テキスト)をドラッグ＆ドロップしたときに、イベントを発生させたいのですが分かりません。

<INPUT TYPE="text" NAME="test" VALUE="" ondragdrop="alert('test!')">
というのを作ってみましたが、ondragdropはファイルにしか対応していないみたいなので無理でした。
ondragoverは反応しましたが、マウスを離す前にイベントが発生するため、こちらの意図する動作にはなりません。

やはりそういうイベントハンドラは用意されていないのでしょうか？

回答No.2

noname#137826 · ベストアンサー

テキストをドラッグするテストをしていませんでした。すみません。
確かに動きませんね。

これでどうでしょう？

---
var t = {
text: '',
mousedown: 0
}

window.onload = function(){
var input = document.getElementById('test');
t.text = input.value;

input.onmouseover = function(){
if (t.mousedown && t.text != this.value) {
t.text = this.value;
alert('dropped');
}
}
input.onchange = function(){
text = this.value;
}
document.onmousedown = function(){
t.mousedown = 1;
}
document.onmouseup = function(){
t.mousedown = 0;
}
}
---

お礼

できました^^

いやいや、色んな方法があるんですね^^
勉強になります。

何度もありがとうざいました。

回答No.1

noname#137826

こんなのはどうでしょう？

<input type="text" id="test" value=""/>

window.onload = function(){
var input = document.getElementById('test');

input.onmouseover = function(){
this.setAttribute('set','');
}
input.onmouseout = function() {
this.removeAttribute('set');
}
input.onmousedown = function() {
this.removeAttribute('set');
}
input.onmouseup = function() {
if (this.hasAttribute('set')) {
alert('dropped');
}
}
}

お礼

ご回答ありがとうございます。

試してみましたが、うまくいきませんでした。
alertをはさんだりして調べてみたところ、テキストをドラッグしている状態だとonmouseupのイベントが発生しないようです。
普通に、何もドラッグせずにマウスのクリックを外しただけなら、イベントが発生しました。
ボクの環境や記述がおかしいのでしょうか？
kaorineさんのところではうまく動きますか？
自分はIE7を使ってるんですが(質問時に書くべきでしたねm(__)m)、ブラウザで違うんですかね？

ただ考え方自体はすごいなぁと感心しました。
setAttributeを使うなんて思いつかなかったです^^

ありがとうございました。