溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
*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"http://拖動時的樣式
}); //可拖動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"http://限制x軸移動
axis: "y"http://限制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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
