jquery.drag.js拖动插件自定义div拖动布局代码



129 513 172



特效描述:拖动插件 自定义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

加群请备注:从官网了解到