讓元素在網(wǎng)頁中可拖動示例代碼
更新時間：2013年08月13日 14:55:35 作者：
讓元素可拖動的方法有很多，本文為大家介紹下使用jquery簡單實現(xiàn)拖動效果，感興趣的朋友可以參考下，希望對大家有所幫助
1.導入相應的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:設置div的樣式:
#draggable {
width:150px;
height:150px;
padding:0.5em;
border:1px solid;
}
4:讓元素可拖動：
<script>
$(function() {
$('#draggable').draggable();
});
</script>
效果請點擊：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>
復制代碼 代碼如下:
<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:設置div的樣式:
復制代碼 代碼如下:
#draggable {
width:150px;
height:150px;
padding:0.5em;
border:1px solid;
}
4:讓元素可拖動：
復制代碼 代碼如下:
<script>
$(function() {
$('#draggable').draggable();
});
</script>
效果請點擊：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>
相關(guān)文章
juqery 學習之四 篩選查找，學習jquery的朋友可以參考下。2010-11-11
下面小編就為大家?guī)硪黄猨query操作select取值賦值與設置選中實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
利用jQuery 實現(xiàn)GridView異步排序、分頁的代碼
經(jīng)常會用到jquery.ui.tabs標簽，如我們可以把備份管理放在一個頁面上，而該頁面有兩個tab分別為備份和還原，但這樣會現(xiàn)在這個頁面臃腫2010-02-02
沒有關(guān)閉按鈕，但是點擊其他地方的時候，彈出框消失，必須用js給彈出框的父元素加上更高的層次，具體實現(xiàn)如下，感興趣的朋友可以參考下2013-08-08
jquery隱藏指定元素的實例（hide方法的使用）2013-11-11
怎么設置文章中所有圖片width大小批量設置方法？這在實際應用中很常見，下面有一段示例，希望對大家有所幫助2013-08-08
jQuery移動web開發(fā)之頁面跳轉(zhuǎn)和加載外部頁面的實現(xiàn)
這篇文章主要介紹了jQuery移動web開發(fā)之頁面跳轉(zhuǎn)和加載外部頁面的實現(xiàn),以changePage()和loadPage()方法的使用為主,需要的朋友可以參考下2015-12-12
本周公司技術(shù)講座輪到我了，準備說說現(xiàn)在流行的jQuery，下面是概要提綱，關(guān)鍵是看custom.js，已上傳源碼，程序中“//##”是分段用的，大家可以根據(jù)每一段取消注釋，然后找到相應的id或class名查看效果。2010-01-01
jQuery實現(xiàn)鼠標移到元素上動態(tài)提示消息框效果
當光標移動到某些元素上時，會彈出像tips的提示框，這種效果想必大家都有見到過吧，下面有個不錯的示例，大家可以感受下2013-10-10
validate是一款很好的jq插件,提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定制選項，滿足應用程序各種需求。該插件捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫用戶自定義方法的 API。2014-11-11