目的就是把一个ListBox中的条目使用Drag and Drop的方式拖到其他的地方去。因为Html里面的Select控件无法解决焦点的问题．所以不能够使用它来做ListBox．所以本人使用了只有一列的table来代替ListBox(放入一个固定大小的Div里面并且通过style的设置可以出现滚动条)．需要解决的是选中的问题(因为在Drag and Drop中必须禁止选中)可以通过onselectbegin事件返回False来解决．废话不多说．看看原码就应该能够清楚
<html>
<head>
<style>
<!--
.drag{position:relative;cursor:hand}
-->
</style>
<script language="JavaScript1.2">
<!--
var dragapproved=false
var dragItem = null;
var dragValue;
document.onmousedown=mouseDown;
document.onmouseup=DropDown;
document.onmousemove = mouseMove;
//-->
function mouseDown()
{
if (event.srcElement.className=="dragArea")
{
if(dragItem != null)
{
dragItem.bgColor = "";
}
dragItem = event.srcElement;
dragItem.bgColor="yellow";
dragValue = dragItem.innerHTML;
dragapproved = true;
DropIn.style.backgroundColor = "yellow";
}
else
{
dragapproved = false;
DropIn.style.backgroundColor = "";
}
}
function DropDown()
{
if (event.button==1&&dragapproved)
{
if(event.srcElement.className=="dropArea")
{
if(event.srcElement.innerHTML == "")
{
event.srcElement.innerHTML = dragValue;
}
else
{
event.srcElement.innerHTML += "<br>"+ dragValue;
}
}
dragapproved=false;
DropIn.style.backgroundColor = "";
}
}
function mouseMove()
{
if(dragapproved)
{
if(temp.style.display != "inline")
{
temp.style.display = "inline";
}
temp.innerHTML = dragValue;
temp.style.pixelLeft=event.clientX;
temp.style.pixelTop = event.clientY;
}
else
{
if(temp.style.display != "none")
{
temp.style.display = "none";
}
}
}
function mouseOverDropArea()
{
if(dragapproved)
{
DropIn.style.backgroundColor = "red";
}
else
{
DropIn.style.backgroundColor = "";
}
}
function mouseOutDropArea()
{
if(dragapproved)
{
DropIn.style.backgroundColor = "yellow";
}
else
{
DropIn.style.backgroundColor = "";
}
}
</script>
</head>
<body>
<p>
<div style="overflow:auto; width:150px; height:100px" onselectstart="return false;">
<table onselectstart="return false;" width=100%>
<tr>
<td class="dragArea" id="aaab">aa
</td>
<td class="dragArea">
</tr>
<tr>
<td class="dragArea">bb
</td>
<td>
</tr>
<tr>
<td class="dragArea">cc
</td>
<td>
</tr>
<tr>
<td class="dragArea">cc
</td>
<td>
</tr>
<tr>
<td class="dragArea">ee
</td>
<td>
</tr>
<tr>
<td class="dragArea">ff
</td>
<td>
</tr>
<tr>
<td class="dragArea">gg
</td>
<td>
</tr>
</table>
</div>
</p>
<div class="dropArea" style="overflow:auto; width:150px; height:100px;border: 1px dotted #808080;" onmouseover="mouseOverDropArea();" id="DropIn" onmouseout="mouseOutDropArea();">
drop here
</div>
<div id="temp" style="border: 1px dotted #808080; background-color: #FFFFFF;display:none;position: absolute; z-index: 2;" onselectstart="return false;">aaaaa </div>
</body>
</html>
|