讓元素在網(wǎng)頁中可拖動(dòng)示例代碼
更新時(shí)間：2013年08月13日 14:55:35 作者：
讓元素可拖動(dòng)的方法有很多，本文為大家介紹下使用jquery簡(jiǎn)單實(shí)現(xiàn)拖動(dòng)效果，感興趣的朋友可以參考下，希望對(duì)大家有所幫助
1.導(dǎo)入相應(yīng)的JS類庫:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
2.帶有id的div元素:
<div id="draggable">
<p>Drag me around!</p>
</div>
3:設(shè)置div的樣式:
#draggable {
width:150px;
height:150px;
padding:0.5em;
border:1px solid;
}
4:讓元素可拖動(dòng)：
<script>
$(function() {
$('#draggable').draggable();
});
</script>
效果請(qǐng)點(diǎn)擊：http://jsfiddle.net/tounaobun/KS8JC/
源代碼：
<!-- import the necessary files -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$('#draggable').draggable();
});
</script>
<style>
#draggable {
width:150px;
height:150px;
padding:0.5em;
border:1px solid;
}
</style>
<div id="draggable">
<p>Drag me around!</p>
</div>
復(fù)制代碼 代碼如下:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
2.帶有id的div元素:
復(fù)制代碼 代碼如下:
<div id="draggable">
<p>Drag me around!</p>
</div>
3:設(shè)置div的樣式:
復(fù)制代碼 代碼如下:
#draggable {
width:150px;
height:150px;
padding:0.5em;
border:1px solid;
}
4:讓元素可拖動(dòng)：
復(fù)制代碼 代碼如下:
<script>
$(function() {
$('#draggable').draggable();
});
</script>
效果請(qǐng)點(diǎn)擊：http://jsfiddle.net/tounaobun/KS8JC/
源代碼：
復(fù)制代碼 代碼如下:
<!-- import the necessary files -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$('#draggable').draggable();
});
</script>
<style>
#draggable {
width:150px;
height:150px;
padding:0.5em;
border:1px solid;
}
</style>
<div id="draggable">
<p>Drag me around!</p>
</div>
相關(guān)文章
基于Jquery+Ajax+Json的高效分頁實(shí)現(xiàn)代碼
分頁我相信大家存儲(chǔ)過程分頁已經(jīng)很熟悉了，ajax更是耳熟能詳了，更別說我們的json，等等2011-10-10
jQuery 右下角滑動(dòng)彈出可關(guān)閉重現(xiàn)層完整代碼
經(jīng)?？吹骄W(wǎng)頁右下角有滑動(dòng)彈出的廣告，這種效果可以使用jQuery彈出層實(shí)現(xiàn)。本實(shí)例使用jQuery實(shí)現(xiàn)右下角滑動(dòng)彈出可關(guān)閉重現(xiàn)層2012-10-10
這篇文章主要介紹了jQuery中阻止冒泡事件的方法介紹,需要的朋友可以參考下2014-04-04
如何使用Jquery動(dòng)態(tài)生成二級(jí)選項(xiàng)列表
這篇文章主要介紹了如何使用Jquery動(dòng)態(tài)生成二級(jí)選項(xiàng)列表,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
jquery.cookie() 方法的使用(讀取、寫入、刪除)
jquery.cookie() 方法:一個(gè)輕量級(jí)的cookie 插件，可以讀取、寫入、刪除 cookie，下面有個(gè)不錯(cuò)的數(shù)量，大家可以學(xué)習(xí)下2013-12-12
這篇文章主要介紹了讓table變成exls的方法,需要的朋友可以參考下2014-03-03
jQuery on()方法綁定動(dòng)態(tài)元素的點(diǎn)擊事件實(shí)例代碼淺析
這篇文章主要介紹了jQuery on()方法綁定動(dòng)態(tài)元素的點(diǎn)擊事件的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
下面小編就為大家?guī)硪黄猟omReady的實(shí)現(xiàn)案例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
jQuery支持動(dòng)態(tài)參數(shù)將函數(shù)綁定到事件上的方法
這篇文章主要介紹了jQuery支持動(dòng)態(tài)參數(shù)將函數(shù)綁定到事件上的方法,實(shí)例分析了兩種支持動(dòng)態(tài)參數(shù)的函數(shù)綁定技巧,需要的朋友可以參考下2015-03-03
jQuery添加新內(nèi)容的四個(gè)常用方法分析【append，prepend，after，before】
這篇文章主要介紹了jQuery添加新內(nèi)容的四個(gè)常用方法,結(jié)合實(shí)例形式分析了jQuery元素添加append，prepend，after，before四種方法的功能與相關(guān)使用技巧,需要的朋友可以參考下2019-03-03