jquery实现的拖动效果问题

最新推荐文章于 2025-05-22 11:48:09 发布

最新推荐文章于 2025-05-22 11:48:09 发布 · 106 阅读

文章标签：

#jQuery #CSS #JavaScript #UI #HTML #ViewUI

javascript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用DIV+CSS和jQuery实现表格拖动效果的方法。通过监听鼠标事件来更新表格的位置，并展示了完整的HTML代码及样式设置。

借助jquery实现对某个物体的拖动，虽然实现了，但感觉用其狠不爽，快速的上下拖动就会脱轨，bug太多了呵呵，还是用jquery自带的拖动爽。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV+CSS模拟表格拖动效果 </title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
<style type="text/css">
#usertable {
	position:absolute;
	width:700px;
	height:165px;
	list-style:none;
	left:340px;
	top:300px;
}
#usertable li {
	border-left:1px solid #ccc;
	border-top:1px solid #ccc;
	float:left;
	width:130px;
	height:33px;
	text-align:center;
	line-height:33px;
	border-bottom:1px solid #ccc;
	border-right:1px solid #ccc;
}



#usertable li.h {
	background-color: green;
	
}

#stutable {
	position:absolute;
	width:700px;
	height:165px;
	list-style:none;
	left:340px;
	top:100px;
}
#stutable li {
	border-left:1px solid #ccc;
	border-top:1px solid #ccc;
	float:left;
	width:130px;
	height:33px;
	text-align:center;
	line-height:33px;
	border-bottom:1px solid #ccc;
	border-right:1px solid #ccc;
}

#stutable li.h {
	background-color: background;
	
}

</style>
<script type="text/javascript">

	var status = false;
	function domousemove(e) {		
		var e = e || event;
		$("#mouseX").val(e.clientX);
		$("#mouseY").val(e.clientY);
		$("#endX").val(e.clientX);
		$("#endY").val(e.clientY);
		var xspace = parseInt($("#endX").val())-parseInt($("#initX").val());
		var yspace = parseInt($("#endY").val())-parseInt($("#initY").val());
		$("#xspace").val(xspace);
		$("#yspace").val(yspace);
		if(status == true){
			var endLeft = parseInt($("#initLeft").val())+xspace+"px";
			var endTop = parseInt($("#initTop").val())+yspace+"px";
			$("#endLeft").val(endLeft);
			$("#endTop").val(endTop);
			$("#usertable").css("left",endLeft);
			$("#usertable").css("top",endTop);
		}
	}
	
	function domousedown(e){
		$("#usertable").css("cursor","move");
		$("#status").val("拖动");
		status = true;
		$("#initX").val(e.clientX);
		$("#initY").val(e.clientY);
	}
	
	function domouseup(e){
		$("#status").val("停止");
		$("#usertable").css("cursor","auto");
		status = false;
		$("#initLeft").val($("#endLeft").val());
		$("#initTop").val($("#endTop").val());
	}
	
	function domouseout(){
		
		$("#status").val("停止");
		$("#usertable").css("cursor","auto");
		status = false;
		var endLeft = $("#endLeft").val();
		var endTop = $("#endTop").val();
		if(endLeft!=""&&endTop!=""){
			$("#initLeft").val(endLeft);
			$("#initTop").val(endTop);	
		}
		
	}
	

	$(document).ready(
			function() {
					$("#usertable").mousedown(domousedown)
					.mouseup(domouseup)
					.mousemove(domousemove);
					//.mouseout(domouseout);
					$("#stutable").draggable();
					$("#initLeft").val($("#usertable").css("left"));
					$("#initTop").val($("#usertable").css("top"));
			});
</script>
</head>
<body 
oncontextmenu="return false" 
ondragstart="return false" 
onselectstart ="return false" 
onselect="document.selection.empty()" 
oncopy="document.selection.empty()" 
onbeforecopy="return false" 
onmouseup="document.selection.empty()">
<div id="main">

  <ul id="usertable" >
    <li class="h">姓名</li>
    <li class="h">年龄</li>
    <li class="h">生日</li>
    <li class="h">性别</li>
    <li class="h">籍贯</li>
    <li>foerver</li>
    <li>22</li>
    <li>1986-08-11</li>
    <li>男</li>
    <li>四川</li>
   <li>foerver</li>
    <li>22</li>
    <li>1986-08-11</li>
    <li>男</li>
    <li>四川</li>
    <li>foerver</li>
    <li>22</li>
    <li>1986-08-11</li>
    <li>男</li>
    <li>四川</li>
    <li>foerver</li>
    <li>22</li>
    <li>1986-08-11</li>
    <li>男</li>
    <li>四川</li>
  </ul>
  <ul id="stutable" >
    <li class="h">姓名</li>
    <li class="h">年龄</li>
    <li class="h">生日</li>
    <li class="h">性别</li>
    <li class="h">籍贯</li>
    <li>foerver</li>
    <li>22</li>
    <li>1986-08-11</li>
    <li>男</li>
    <li>四川</li>
   <li>foerver</li>
    <li>22</li>
    <li>1986-08-11</li>
    <li>男</li>
    <li>四川</li>
    <li>foerver</li>
    <li>22</li>
    <li>1986-08-11</li>
    <li>男</li>
    <li>四川</li>
    <li>foerver</li>
    <li>22</li>
    <li>1986-08-11</li>
    <li>男</li>
    <li>四川</li>
  </ul>
  <div>
  	初始鼠标点击坐标x：<input type="text" id="initX" value="0"/><br/>
  	初始鼠标点击坐标y：<input type="text" id="initY" value="0"/><br/>
  	结束鼠标释放坐标x：<input type="text" id="endX" value="0"/><br/>
  	结束鼠标释放坐标y：<input type="text" id="endY" value="0"/><br/>
  	横坐标移动距离：<input type="text" id="xspace"/><br/>
  	纵坐标移动距离：<input type="text" id="yspace"/><br/>
  	表格状态：<input type="text" id="status"/><br/>
  	当前鼠标x:<input type="text" id="mouseX"  /><br/>
  	当前鼠标y:<input type="text" id="mouseY" /><br/>
  	表格初始left：<input type="text" id="initLeft" /><br/>
  	表格初始top：<input type="text" id="initTop" /><br/>
  	表格结束left：<input type="text" id="endLeft" /><br/>
  	表格结束top：<input type="text" id="endTop" /><br/>
  </div>
</div>
</body>
</html>