已经实现了在textarea里添加并显示button，但是不知道如何实现在textarea内拖动button

[shiqing8899]

在textarea中的文字，我们是可以选中后将其拖动到textarea的其他位置的，但是所增加的button却没有办法做到
另外获取到的textarea的value里面没有包含所增加的button

请问大侠如何实现在textarea内拖拉button
或者是复制和粘贴这里面的button呢

分不多，请各位见谅。。。

代码如下：

<textarea id="test" name="test" rows="15" cols="60">content test</textarea>
<br>
<input type="button" value="getValue" onclick="alert(test.value);return false">
<input type="button" value="getInnerHTML" onclick="alert(test.innerHTML);return false">
<input type="button" value="addButton" onclick="addButton('buttonTest')">

<script type="text/javascript">
function addButton(str) {
var oDiv = document.createElement("INPUT");
oDiv.type = "button";
oDiv.id = str;
oDiv.value = str;
test.appendChild(oDiv);
}

addButton("button1");
addButton("button2");
addButton("button3");

</script>

[shiqing8899]

up

[shiqing8899]

up

[shiqing8899]

还是没人回个贴，还是自己回答好了。

<table>
<tr>
<td width="100px" valign="top">
<input type=button value="aaaaa" style="width:60px;" onclick="return false" onmousedown="doOnMouseDown()" ondragstart="doOnDragStart()">
<input type=button value="bbbbb" style="width:60px;" onclick="return false" onmousedown="doOnMouseDown()" ondragstart="doOnDragStart()">
<input type=button value="ccccc" style="width:60px;" onclick="return false" onmousedown="doOnMouseDown()" ondragstart="doOnDragStart()">
<input type=button value="ddddd" style="width:60px;" onclick="return false" onmousedown="doOnMouseDown()" ondragstart="doOnDragStart()">
<input type=button value="eeeee" style="width:60px;" onclick="return false" onmousedown="doOnMouseDown()" ondragstart="doOnDragStart()">
<input type=button value="fffff" style="width:60px;" onclick="return false" onmousedown="doOnMouseDown()" ondragstart="doOnDragStart()">
<input type=button value="ggggg" style="width:60px;" onclick="return false" onmousedown="doOnMouseDown()" ondragstart="doOnDragStart()">
<input type=button value="hhhhh" style="width:60px;" onclick="return false" onmousedown="doOnMouseDown()" ondragstart="doOnDragStart()">
</td>
<td>
<div ondrop="doOnDrop()" ondragover="doOnDragOver()" id=ct1 contentEditable="true" style="border:solid 1px black;width:500;height:150;border-style:outset;overflow: auto;"></div>
<input type=button value=getCt1Value onclick="alert(ct1.innerHTML)">
<br><br>
<div ondrop="doOnDrop()" ondragover="doOnDragOver()" id=ct2 contentEditable="true" style="border:solid 1px black;width:500;height:150;border-style:outset;overflow: auto;"></div>
<input type=button value=getCt1Value onclick="alert(ct2.innerHTML)">
</td>
<tr>
</table>
<script type="text/javascript">
ct1.focus();
ct1.document.selection.createRange().pasteHTML("<input type=\"button\" value=\"ct1\" contentEditable=false>");
ct2.focus();
ct2.document.selection.createRange().pasteHTML("<input type=\"button\" value=\"ct2\" contentEditable=false>");

var _nodeName = "";
var _nodeSrc = "";

function createButton(str) {
var oButton = document.createElement("BUTTON");
oButton.id = str;
oButton.value = str;
oButton.title = str;
oButton.contentEditable = false;
return oButton;
}

function doOnMouseDown() {
event.srcElement.dragDrop();
}

function doOnDragStart() {
event.dataTransfer.setData("TEXT",""); //这里我没有采用这个来保存数据
_nodeName = event.srcElement.value;
_nodeSrc = "tree";
}

function doOnDrop() {
if(_nodeSrc == "tree") {
var vData = _nodeName;
var obj = event.srcElement;
if(obj) {
if(!obj.hasFocus) {
obj.focus();
}
var rang = obj.document.selection.createRange();
rang.pasteHTML(createButton(vData).outerHTML);
}
}
_nodeSrc = "";
}

function doOnDragOver() {
event.dataTransfer.dropEffect='copy';
event.returnValue = true;
event.cancelBubble = true;
}
</script>

[shiqing8899]

希望对以后遇到这个问题的有点帮助