jquery.drag.js拖動插件自定義div拖動布局代碼



133 531 178



特效描述:拖動插件 自定義div拖動布局,jquery拖動插件,div拖動布局

代碼結構

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

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

湖北30选5开奖结果走势图表