*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>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
