用Javascript实现拖曳ListBox中拖曳的功能

最新推荐文章于 2024-10-11 17:39:47 发布

binwind

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量1.2k

点赞数

文章标签： javascript dropdown class function div table

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/binwind/article/details/998776

版权

目的就是把一个ListBox中的条目使用Drag and Drop的方式拖到其他的地方去。因为Html里面的Select控件无法解决焦点的问题．所以不能够使用它来做ListBox．所以本人使用了只有一列的table来代替ListBox(放入一个固定大小的Div里面并且通过style的设置可以出现滚动条)．需要解决的是选中的问题(因为在Drag and Drop中必须禁止选中)可以通过onselectbegin事件返回False来解决．废话不多说．看看原码就应该能够清楚

<html>

<head>
<style>

</style>
<script language="JavaScript1.2">
<!--
var dragapproved=false
var dragItem = null;
var dragValue;

document.οnmοusedοwn=mouseDown;
document.οnmοuseup=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;" οnmοuseοver="mouseOverDropArea();" id="DropIn" οnmοuseοut="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>

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。