jQuery基于drag.js插件自由拖拽代碼



88 349 117



特效描述:jQuery 基于drag.js插件 自由拖拽代碼,支持水平拖拽,垂直拖拽,自由拖拽等不同特效

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/style.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/drag.js"></script>

3. HTML代碼

<p>只能水平拖動</p>
<div class='box box-1'>
	<dl><img src="img/01.jpg" width=150 height=150></dl>
</div>
<p>只能垂直拖動</p>
<div class='box box-2'>
	<dl><img src="img/02.jpg" width=150 height=150></dl>
</div>
<p>自由拖動,初始位置固定</p>
<div class='box box-3'>
	<dl><img src="img/03.jpg" width=150 height=150></dl>
</div>
<p>自動拖動,初始位置隨機</p>
<div class='box box-4'>
	<dl><img src="img/04.jpg" width=150 height=150></dl>
	<dl><img src="img/05.jpg" width=150 height=150></dl>
	<dl><img src="img/06.jpg" width=150 height=150></dl>
	<dl><img src="img/07.jpg" width=150 height=150></dl>
</div>
<p>自動拖動,初始位置隨機,hander拖動</p>
<div class='box box-5'>
	<dl><i class='hander'>拖我</i><img src="img/04.jpg" width=150 height=150></dl>
	<dl><i class='hander'>拖我</i><img src="img/05.jpg" width=150 height=150></dl>
	<dl><i class='hander'>拖我</i><img src="img/06.jpg" width=150 height=150></dl>
	<dl><i class='hander'>拖我</i><img src="img/07.jpg" width=150 height=150></dl>
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 拖動 拖拽 拖動插件 拖拽插件 圖片拖動 圖片拖拽
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子