拖拽时鼠标相关问题

dongshanyu 2016-02-04 05:45:42

IE8下执行拖拽操作，希望达到以下效果：
1.拖拽时鼠标左键不释放，进入目标区域，把光标修改手型光标
2.在目标区域里，鼠标左键释放，做一些数据处理
3.离开后光标还原

代码如下:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

	<head>

		<title>test</title>

		<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">

		<script language="javascript">

			function itemOnDrag(obj) {				

				sItemValue = obj.value;

				sItemText = obj.innerHTML;

			}

			

			function listOnMouseOver(obj) {				

				if (typeof (sItemValue) == "undefined" || sItemValue == null) return;

				if (typeof (sItemText) == "undefined" || sItemText == null) return;

				if (sItemValue != "" && sItemText != "") {

					obj.style.cursor = 'hand';

					obj.style.background = "lightyellow";

					var bFind = false;

					for(var i=0;i<obj.options.length-1;i++) {

						if (obj.options[i].value == sItemValue){

							obj.options[i].selected = true;

							bFind = true;

							break;

						}

					}

					if (!bFind) {

						var op = new Option(sItemValue, sItemText);

						obj.options.add(op);

						op.selected = true;

					}					

					sItemValue = "";

					sItemText = "";						

			    }

			}

									

			function listOnMouseOut(obj){

				obj.style.cursor = 'default';

				obj.style.background = "lightgreen";

			}

		</script>				

	</head>

	<body MS_POSITIONING="GridLayout">

		<table id="tbSource" width="width:200px" border="1" cellspacing="0" cellpadding="0">

			<tr>

				<td align="left">

					<a href="#" ondrag="itemOnDrag(this);" title="Jimmy" value="Jimmy">Jimmy</a>

				</td>

			</tr>

			<tr>

				<td align="left">

					<a href="#" ondrag="itemOnDrag(this);" title="Young" value="Young">Young</a>

				</td>

			</tr>

			<tr>

				<td align="left">

					<a href="#" ondrag="itemOnDrag(this);" title="Boddle" value="Boddle">Boddle</a>

				</td>

			</tr>

			<tr>

				<td align="left">

					<a href="#" ondrag="itemOnDrag(this);" title="Helen" value="Helen">Helen</a>

				</td>

			</tr>

			<tr>

				<td align="left">

					<a href="#" ondrag="itemOnDrag(this);" title="Lucy" value="Lucy">Lucy</a>

				</td>

			</tr>

			<tr>

				<td align="left">

					<a href="#" ondrag="itemOnDrag(this);" title="Alica" value="Alica">Alica</a>

				</td>

			</tr>

		</table>

		<SELECT style="Z-INDEX: 101; POSITION: absolute; WIDTH: 120px; HEIGHT: 136px; TOP: 16px; LEFT: 136px"

			id="lstTarget" size="8" name="lstTarget"

				onmouseover="listOnMouseOver(this);" onmouseout="listOnMouseOut(this);"

						

			>

		</SELECT>

	</body>

</html>