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



85 338 113



特效描述: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

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