js、jquery鼠标拖拽时保持拖动形状，如“move”或“n-resize”，直至mouseup为止，下面是demo，可参考。
<!DOCTYPEHTML><htmllang="en-US"><head><metacharset="UTF-8"><title></title><styletype=...
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#cont{width:600px;height:400px;border:1px solid #ccc;margin:0 auto;}
#area_a{width:100%;height:200px;background:#ffce80;}
#area_b{width:100%;height:50px;background:#ff0;cursor:move;}
#area_c{width:100%;height:150px;background:#c3d9ff;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#area_b").mousedown(function(e1){
var area_a_h = $("#area_a").height(),
area_c_h = $("#area_c").height();
$(document).bind("mousemove",function(e2){
var curr = e2.pageY -e1.pageY;
$("#area_a").height(area_a_h + curr);
$("#area_c").height(area_c_h - curr);
}).mouseup(function(){
$(document).unbind("mousemove");
})
})
})
</script>
</head>
<body>
<div id="cont">
<div id="area_a"></div>
<div id="area_b"></div>
<div id="area_c"></div>
</div>
</body>
</html> 展开
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#cont{width:600px;height:400px;border:1px solid #ccc;margin:0 auto;}
#area_a{width:100%;height:200px;background:#ffce80;}
#area_b{width:100%;height:50px;background:#ff0;cursor:move;}
#area_c{width:100%;height:150px;background:#c3d9ff;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#area_b").mousedown(function(e1){
var area_a_h = $("#area_a").height(),
area_c_h = $("#area_c").height();
$(document).bind("mousemove",function(e2){
var curr = e2.pageY -e1.pageY;
$("#area_a").height(area_a_h + curr);
$("#area_c").height(area_c_h - curr);
}).mouseup(function(){
$(document).unbind("mousemove");
})
})
})
</script>
</head>
<body>
<div id="cont">
<div id="area_a"></div>
<div id="area_b"></div>
<div id="area_c"></div>
</div>
</body>
</html> 展开
3个回答
展开全部
mousedown的时候设置鼠标的样式，mouseup还原不就行了：
$(function(){
$("#area_b").mousedown(function(e1){
$("#cont")..css("cursor", "move");
var area_a_h = $("#area_a").height(),
area_c_h = $("#area_c").height();
$(document).bind("mousemove",function(e2){
var curr = e2.pageY -e1.pageY;
$("#area_a").height(area_a_h + curr);
$("#area_c").height(area_c_h - curr);
}).mouseup(function(){
$("#cont")..css("cursor", "default");
$(document).unbind("mousemove");
})
})
})
$(function(){
$("#area_b").mousedown(function(e1){
$("#cont")..css("cursor", "move");
var area_a_h = $("#area_a").height(),
area_c_h = $("#area_c").height();
$(document).bind("mousemove",function(e2){
var curr = e2.pageY -e1.pageY;
$("#area_a").height(area_a_h + curr);
$("#area_c").height(area_c_h - curr);
}).mouseup(function(){
$("#cont")..css("cursor", "default");
$(document).unbind("mousemove");
})
})
})
追问
非也，拖动的时候document有select默认事件，必须清除，LZ试试就明白了。
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
#area_b{width:100%;height:50px;background:#ff0;cursor:move; display:block;}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
不明白你的意思。你直接说你要搞啥就行了 供参考。。具体的问题 没懂。。
追问
目标就是：拖动的时候保持鼠标手势不变！
上边的demo运行可以看到，在chrome下按住鼠标进行拖动时，本应该是“move”手势，拖的时候没有保持，成了“text”可输入形状。
追答
我弄下来保存成HTM试试, 最终，加上如下代码，就行了。
document.onselectstart = function(){return false;};放在$(function(){这句前面就可以。你自己试试
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
