jquery拖动div
*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>
<title></title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
//监听事件与回显
$(function () {
$("#dragsource").draggable({
create: function (event, ui) { $("#div1").html("创建了"); },
start: function (event, ui) { $("#div1").html("拖动了"); },
drag: function (event, ui) { $("#div1").html("移动中"); },
stop: function (event, ui) { $("#div1").html("停止了"); },
revert:"invalid",//拖动返回原来的位置
cursor:"move"//拖动时的样式
}); //可拖动DIV
$("#droppalbe").droppable({
create: function (event, ui) { $("#div2").html("创建了"); },
activate: function (event, ui) { $("#div2").html("activeta"); }, //判断源div能不能落到目标div上（拖拽中）
deactivate: function (event, ui) { $("#div2").html("deactivate"); }, //判断源div能不能落到目标div上(拖拽停止)
over: function (event, ui) { $("#div3").html("进入容器"); },
out: function (event, ui) { $("#div3").html("离开容器"); },
drop: function (event, ui) { $("#div3").html("落到容器上了"); } //和activate、deactivate有冲突
}); //容器
});
</script>
</head>
<body>
<div id="dragsource" >
<p>拽我!</p>
</div>
<div id="droppalbe" >
<p>Drop here</p>
</div>
<div id="div1" >
</div>
<div id="div2" >
</div>
<div id="div3" >
</div>
</body>
</html>=============================================================== //复制拖动(helper)
<!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>
<title></title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
//复制拖动
$(function () {
$("#resource").draggable({
helper: "clone"
});
$("#targer").droppable({
drop: function (event, ui) {//把源div放在容器中时触发
var div = $("#resource").clone(false); //复制div
div.css({"top":ui.offset.top+"px","left":ui.offset.left+"px"});//设置坐标
$(this).append(div);//在容器中添加div
}
});
});
</script>
</head>
<body>
<div></div>
<div >
<div id="resource" ></div>
</div>
<div id="targer"></div>
</body>
</html>=============================================================== //拖动方向控制(axis)
<!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>
<title></title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//拖动方向控制
$("#resouce").draggable({
//axis: "x"//限制x轴移动
axis: "y"//限制y轴移动
});
});
</script>
</head>
<body>
<div id="resouce"></div>
</body>
</html>=============================================================== //拖动范围控制(containment)
<!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>
<title></title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
//拖动范围控制
$(function () {
$("#resource").draggable({
//containment: $("#targer") 第一种方式
// containment:"parent" 第二种方式
containment:[0,0,300,200] //第三种方式
});
});
</script>
</head>
<body>
<div id="targer">
<div id="resource" ></
</div>
div>
</body>
</html>=============================================================== //拖动吸附(snap,grid)
<!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>
<title></title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript">
$(function () {
//拖动吸附
$("#source1").draggable({
snap:true
});
$("#source2").draggable({
snap: "#targer"
});
$("#source3").draggable({
grid: [50,50]
});
});
</script>
</head>
<body>
<div id="targer" >容器</div>
<br /><br /><br />
<div id="source1" >吸附到可拖动div</div>
<br /><br /><br />
<div id="source2" >吸附到容器</div>
<br /><br /><br />
<div id="source3" >吸附到网格</div>
</body>
</html>=============================================================== //拖动div手柄（handle）
<!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>
<title></title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//拖动div手柄
$("#resource").draggable({
handle:$(".p")
});
});
</script>
</head>
<body>
<div id="resource" >
<p class="p" ></p>
</div>
</body>
</html>
分享文章：jquery拖动div
文章分享：https://www.cdcxhl.com/article16/gdghgg.html
成都网站建设公司_创新互联，为您提供搜索引擎优化、响应式网站、Google、定制网站、网站导航、ChatGPT
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联
- 如何对网站进行修改？ 2021-12-01
- 服务器租用(优势好处有哪些) 2023-07-09
- 怎样做网页能快上一些呢？ 2015-05-14
- 新加坡游戏服务器租用要注意什么? 2023-07-13
- 掌握哪些技巧可以写出好的软文？ 2014-06-29
- 怎样快速合理的搭建竞价账户？ 2020-10-02
- 企业网站开发要了解哪些常识? 2023-04-16
- 两个方法让您的企业网站迅速得到好排名 2022-08-24
- 多年的网站优化知识白学了这样理解也行？ 2023-10-10
- PC互联网向移动互联网转型，是大势所趋 2021-02-19
- 走出误区，正确认识网络营销! 2016-01-25
- 美国vps服务器可以搭建哪些类型的网站? 2023-07-22