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

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

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

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

No.1 回答者： noname#137826 回答日時： 2009/08/14 17:07

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

<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を使うなんて思いつかなかったです^^

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

お礼日時：2009/08/14 23:52

No.2 ベストアンサー 回答者： noname#137826 回答日時： 2009/08/15 17:09

テキストをドラッグするテストをしていませんでした。

すみません。
確かに動きませんね。

これでどうでしょう？

---
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;
}
}
---

この回答へのお礼

できました^^

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

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

お礼日時：2009/08/15 19:20