想用JQ实现一个按住一个图标，div可以上下拖动的效果，请给个详细的JQ和HTML代码，谢谢了 10
3个回答
展开全部
网上有插件，我这也有案例代码，要是贴上来就太多了，我以前写了个放windows窗口的效果，你可以参考一下，代码如下，全部复制出去，修改下jquery库的路劲就可以测试：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//定义各个DOM元素及按钮，obj是整个窗口，objcurs窗口的导航，guan是窗口关闭按钮，xiao是缩小到任务栏按钮，max是最大化窗口按钮
var obj=$('.id'),objcur=$('.nav'),guan=$('.guan'),xiao=$('.xiao'),max=$('.max');
//定义所有变量，tuo为鼠标是否在导航上按下
var tuo=false;
//记录窗口最小最大前的位置及宽高
var lefts,tops,widths,heights;
//这里获取窗口元素的宽高，用于窗口最小最大后还原窗口，但是是有错的，因为窗口在真正的项目中是可以拉大拉小的，而我这里没有开发此功能
widths=obj.width();
heights=obj.height();
var X,Y;
objcur.mousedown(function(e){
X=e.pageX-obj.offset().left;
Y=e.pageY-obj.offset().top;
tuo=true;
})
$(document).mousemove(function(e){
//如果当前窗口为100%则不允许拖动
if(obj.width() == $(document).width()){
tuo=false;
}
if(tuo){
obj.css({
left:e.pageX-X,
top:e.pageY-Y
})
lefts=obj.offset().left;
tops=obj.offset().top;
}
}).mouseup(function(){
tuo=false;
})
//窗口最大化
var shu=0;
//双击导航框缩放窗口
objcur.dblclick(function(){
max.click();
})
//单击缩放按钮缩放窗口
max.click(function(){
if(shu == 0){
obj.animate({
width:'100%',
height:'100%',
left:'0px',
top:'0px'
},200);
shu = 1;
}else if(shu ==1){
obj.animate({
width:widths,
height:heights,
left:lefts,
top:tops
},200);
shu = 0;
}
})
//关闭窗口，也就删除了DOM元素
guan.click(function(){
obj.remove();
})
//缩小到任务栏
var xiaos=1;
xiao.click(function(){
if(xiaos == 1){
var s=$(document).height();//此处获取浏览器可视窗口的高度，也存在问题，当我们的窗口拉到浏览器上或下可视窗口外的时候，那么浏览器可视窗口的高度也被增大了，所以当我们的窗口拉到浏览器可视窗口上或下的外面的时候，我们缩小窗口到任务栏的话就将看不到缩小后的窗口，最简单的办法就是把此变量设置成全局变量，当页面加载的时候此变量就初始化了就不会被窗口拉出的时候增大
obj.animate({
left:'0px',
top:s-24,
width:'150px',
height:'24px'
},200);
xiaos =0;
}else if(xiaos == 0){
obj.animate({
width:widths,
height:heights,
left:lefts,
top:tops
},200);
xiaos =1;
}
})
});
</script>
<style type="text/css">
html,body{width:100%;height:100%;font-size:12px;overflow:hidden;margin:0px;padding:0px;position:relative;}
.id{width:300px;height:200px;background:red;overflow:hidden;position:absolute;left:0px;top:0px;}
.id p{background:green;cursor:pointer;color:#fff;margin:0px;height:24px;line-height:24px;}
.id p span{float:right;margin-right:5px;background:blue;}
</style>
</head>
<body>
<div class="id">
<p class="nav">按下我才能拖拽
<span class="guan">X</span>
<span class="max">口</span>
<span class="xiao">--</span>
</p>
</div>
</body>
</html>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//定义各个DOM元素及按钮，obj是整个窗口，objcurs窗口的导航，guan是窗口关闭按钮，xiao是缩小到任务栏按钮，max是最大化窗口按钮
var obj=$('.id'),objcur=$('.nav'),guan=$('.guan'),xiao=$('.xiao'),max=$('.max');
//定义所有变量，tuo为鼠标是否在导航上按下
var tuo=false;
//记录窗口最小最大前的位置及宽高
var lefts,tops,widths,heights;
//这里获取窗口元素的宽高，用于窗口最小最大后还原窗口，但是是有错的，因为窗口在真正的项目中是可以拉大拉小的，而我这里没有开发此功能
widths=obj.width();
heights=obj.height();
var X,Y;
objcur.mousedown(function(e){
X=e.pageX-obj.offset().left;
Y=e.pageY-obj.offset().top;
tuo=true;
})
$(document).mousemove(function(e){
//如果当前窗口为100%则不允许拖动
if(obj.width() == $(document).width()){
tuo=false;
}
if(tuo){
obj.css({
left:e.pageX-X,
top:e.pageY-Y
})
lefts=obj.offset().left;
tops=obj.offset().top;
}
}).mouseup(function(){
tuo=false;
})
//窗口最大化
var shu=0;
//双击导航框缩放窗口
objcur.dblclick(function(){
max.click();
})
//单击缩放按钮缩放窗口
max.click(function(){
if(shu == 0){
obj.animate({
width:'100%',
height:'100%',
left:'0px',
top:'0px'
},200);
shu = 1;
}else if(shu ==1){
obj.animate({
width:widths,
height:heights,
left:lefts,
top:tops
},200);
shu = 0;
}
})
//关闭窗口，也就删除了DOM元素
guan.click(function(){
obj.remove();
})
//缩小到任务栏
var xiaos=1;
xiao.click(function(){
if(xiaos == 1){
var s=$(document).height();//此处获取浏览器可视窗口的高度，也存在问题，当我们的窗口拉到浏览器上或下可视窗口外的时候，那么浏览器可视窗口的高度也被增大了，所以当我们的窗口拉到浏览器可视窗口上或下的外面的时候，我们缩小窗口到任务栏的话就将看不到缩小后的窗口，最简单的办法就是把此变量设置成全局变量，当页面加载的时候此变量就初始化了就不会被窗口拉出的时候增大
obj.animate({
left:'0px',
top:s-24,
width:'150px',
height:'24px'
},200);
xiaos =0;
}else if(xiaos == 0){
obj.animate({
width:widths,
height:heights,
left:lefts,
top:tops
},200);
xiaos =1;
}
})
});
</script>
<style type="text/css">
html,body{width:100%;height:100%;font-size:12px;overflow:hidden;margin:0px;padding:0px;position:relative;}
.id{width:300px;height:200px;background:red;overflow:hidden;position:absolute;left:0px;top:0px;}
.id p{background:green;cursor:pointer;color:#fff;margin:0px;height:24px;line-height:24px;}
.id p span{float:right;margin-right:5px;background:blue;}
</style>
</head>
<body>
<div class="id">
<p class="nav">按下我才能拖拽
<span class="guan">X</span>
<span class="max">口</span>
<span class="xiao">--</span>
</p>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用JQuery UI
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） - 默认功能</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em;cursor:move}
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>请拖动我！</p>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） - 默认功能</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em;cursor:move}
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>请拖动我！</p>
</div>
</body>
</html>
追问
不好意思我没说清楚问题，想要一个 一共有3个div，按住第一个div里的图标时把它移到第二个或者第三个上，位置会互换
追答
你可以 百 度 菜鸟 w3c 里面的JQuery UI ，里面的排序就是你要的效果
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个效果可以去站长素材里找找，很多
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
