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"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>
分享文章：jquery拖動div
文章分享：http://vcdvsql.cn/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