如何让页面中的DIV可以用鼠标拖动呢？有没有可以实现的方法？
5个回答
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
var mouseX, mouseY;
var objX, objY;
var isDowm = false; //是否按下鼠标
function mouseDown(obj, e) {
obj.style.cursor = "move";
objX = div1.style.left;
objY = div1.style.top;
mouseX = e.clientX;
mouseY = e.clientY;
isDowm = true;
}
function mouseMove(e) {
var div = document.getElementById("div1");
var x = e.clientX;
var y = e.clientY;
if (isDowm) {
div.style.left = parseInt(objX) + parseInt(x) - parseInt(mouseX) + "px";
div.style.top = parseInt(objY) + parseInt(y) - parseInt(mouseY) + "px";
document.getElementById("span1").innerHTML = "x:" + div.style.top + " " + "y:" + div.style.left;
}
}
function mouseUp(e) {
if (isDowm) {
var x = e.clientX;
var y = e.clientY;
var div = document.getElementById("div1");
div.style.left = (parseInt(x) - parseInt(mouseX) + parseInt(objX)) + "px";
div.style.top = (parseInt(y) - parseInt(mouseY) + parseInt(objY)) + "px";
document.getElementById("span2").innerHTML = "x:" + div.style.top + " " + "y:" + div.style.left;
mouseX = x;
rewmouseY = y;
div1.style.cursor = "default";
isDowm = false;
}
}
</script>
</head>
<body>
<span id="span1"></span></br><span id="span2"></span></br>
<div id="div1" style="background-color: Green; border: 1px solid red; height: 300px;
top: 100px; left: 100px; width: 300px; position: absolute;" onmousedown="mouseDown(this,event)"
onmousemove="mouseMove(event)" onmouseup="mouseUp(event)">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
var mouseX, mouseY;
var objX, objY;
var isDowm = false; //是否按下鼠标
function mouseDown(obj, e) {
obj.style.cursor = "move";
objX = div1.style.left;
objY = div1.style.top;
mouseX = e.clientX;
mouseY = e.clientY;
isDowm = true;
}
function mouseMove(e) {
var div = document.getElementById("div1");
var x = e.clientX;
var y = e.clientY;
if (isDowm) {
div.style.left = parseInt(objX) + parseInt(x) - parseInt(mouseX) + "px";
div.style.top = parseInt(objY) + parseInt(y) - parseInt(mouseY) + "px";
document.getElementById("span1").innerHTML = "x:" + div.style.top + " " + "y:" + div.style.left;
}
}
function mouseUp(e) {
if (isDowm) {
var x = e.clientX;
var y = e.clientY;
var div = document.getElementById("div1");
div.style.left = (parseInt(x) - parseInt(mouseX) + parseInt(objX)) + "px";
div.style.top = (parseInt(y) - parseInt(mouseY) + parseInt(objY)) + "px";
document.getElementById("span2").innerHTML = "x:" + div.style.top + " " + "y:" + div.style.left;
mouseX = x;
rewmouseY = y;
div1.style.cursor = "default";
isDowm = false;
}
}
</script>
</head>
<body>
<span id="span1"></span></br><span id="span2"></span></br>
<div id="div1" style="background-color: Green; border: 1px solid red; height: 300px;
top: 100px; left: 100px; width: 300px; position: absolute;" onmousedown="mouseDown(this,event)"
onmousemove="mouseMove(event)" onmouseup="mouseUp(event)">
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标拖拽</title>
<script type="text/javascript">
function Drag(o, e){
var e = window.event || e;
var _x = e.offsetX || e.layerX;
var _y = e.offsetY || e.layerY;
o.style.filter = 'Alpha(opacity=70)';
o.style.opacity = '0.7';
document.onmousemove = function(e){
var e = window.event || e;
o.style.left = e.clientX - _x + 'px';
o.style.top = e.clientY - _y + 'px';
o.style.cursor="move";
}
document.onmouseup = function(e){
document.onmousemove = null;
o.style.filter = o.style.opacity = '';
o.style.cursor="default";
}
}
</script>
</head>
<body>
<div onmousedown="Drag(this, event)" style="position:absolute;border:1px solid red;background:pink;width:400px;height:300px;"></div>
<div onmousedown="Drag(this, event)" style="position:absolute;left:500px;border:1px solid red;background:pink;width:400px;height:300px;"></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标拖拽</title>
<script type="text/javascript">
function Drag(o, e){
var e = window.event || e;
var _x = e.offsetX || e.layerX;
var _y = e.offsetY || e.layerY;
o.style.filter = 'Alpha(opacity=70)';
o.style.opacity = '0.7';
document.onmousemove = function(e){
var e = window.event || e;
o.style.left = e.clientX - _x + 'px';
o.style.top = e.clientY - _y + 'px';
o.style.cursor="move";
}
document.onmouseup = function(e){
document.onmousemove = null;
o.style.filter = o.style.opacity = '';
o.style.cursor="default";
}
}
</script>
</head>
<body>
<div onmousedown="Drag(this, event)" style="position:absolute;border:1px solid red;background:pink;width:400px;height:300px;"></div>
<div onmousedown="Drag(this, event)" style="position:absolute;left:500px;border:1px solid red;background:pink;width:400px;height:300px;"></div>
</body>
</html>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
推荐你使用JQUERY的UI 里面有全套演示，而且使用简单
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
1.data写错了
应该这样写: data:'classId='+$("#TextBox2").val()+'&publisher='+$("#TextBox3").val()
2.这个是通过url进行访问webservice，需要配置一下web.config
在webconfig里面的<system.web>节内加上
<webServices>
<protocols>
<add name="HttpSoap"/>
<add name="HttpPost"/>
<add name="HttpGet"/>
<add name="Documentation"/>
</protocols>
</webServices>
应该这样写: data:'classId='+$("#TextBox2").val()+'&publisher='+$("#TextBox3").val()
2.这个是通过url进行访问webservice，需要配置一下web.config
在webconfig里面的<system.web>节内加上
<webServices>
<protocols>
<add name="HttpSoap"/>
<add name="HttpPost"/>
<add name="HttpGet"/>
<add name="Documentation"/>
</protocols>
</webServices>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
