ドラッグできるエレメントを複数作成

質問

フォームのテキスト入力枠から入力した文字を
div要素の中に入れて、そのdiv要素をドラッグできるように
したいのです。
ドラッグ要素の作成にはAjaxライブラリの「bytefx_OS.js」を
使っています。
今下記のようにソースを書いています。
＝＝＝＝＝＝＝＝＝＝＝＝＝
var txtnum = 0;
function apptxt() {
var uptxt1 = document.forms["txtup"].txt1.value;
var newDiv = document.createElement("div");
newDiv.position = "relative";
newDiv.style.color = "#000000" ;
newDiv.style.fontSize = 12;
newDiv.style.cursor = "move" ;
newDiv.id = "txt" + txtnum ;
newDiv.innerHTML = uptxt1 ;
document.getElementById("txtbox").appendChild(newDiv) ;
bytefx.drag(document.getElementById("txt" + txtnum));
document.forms["txtup"].txt1.value = "";
txtnum = ++txtnum ;
}
-----
<div id="txtbox">
<form name="txtup">
<input type="text" name="txt1" size="40">
<input type="button" name="txt" value="文字を入力する" onclick="apptxt();">
</form>
</div>
＝＝＝＝＝＝＝＝＝＝＝＝＝
これだと、１回目に入力してできた
div要素はドラッグできるのですが
２回目以降にできるdiv要素のドラッグができません。
（div要素だけは作成されるのですが）
どうすれば２回目以降のdiv要素もドラッグができるようになるのか
分かる方がいたらお教えください。お願いします。

回答No.1

KI401 · ベストアンサー

input要素のname属性"txt1"と、apptxt()関数内で生成するdiv要素につけるid属性が、
txtnum=1のときに被っている。従って、適当に別な(name|id)をつければいい。
# こういうプログラム書いているから当然わかっていると思うけど、idは重複してはいけない。

あと他にも突っ込みたいが、突っ込むとキリがないのでこれ以上は突っ込まない。