jQuery多种鼠标拖拽效果代码



87 347 116



特效描述:jQuery 多种鼠标拖拽效果,jQuery多种鼠标拖拽效果代码

代码结构

1. 引入JS

<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="dist/draggabilly.pkgd.min.js"></script>

2. HTML代码

<article class="zzsc-container">
	<header class="zzsc-header">
		<h1>拖动插件</h1>
	</header>
	<div class="zzsc-content">
		<h3>可以任意拖动。</h3>
		<div class="box box-1" id="draggable1">
			<div class="total-centered">Drap me</div>
		</div>
		<h3>只能在X轴上拖动。</h3>
		<div class="box box-2" id="draggable2">
			<div class="total-centered">axis:'x'</div>
		</div>
		<h3>只能在父容器中移动。</h3>
		<div class="container">
		  <div class="draggable"></div>
		  <div class="draggable"></div>
		  <div class="draggable"></div>
		</div>
		<h3>以网格的方式拖动。</h3>
		<div class="box box-3" id="draggable3"><div class="total-centered">grid[x,y]</div></div>
		<h3>指定拖动交互元素(只有内部小方块区域可以进行拖动)。</h3>
		<div class="box box-4" id="draggable4">
		  <div class="handle"></div>
		</div>
	</div>
</article>
<script type="text/javascript">
	$(function(){
		$('#draggable1').draggabilly();
		$('#draggable2').draggabilly({
			axis: 'x'
		}); 
		$('.draggable').draggabilly({ containment: true });
		$('#draggable3').draggabilly({grid: [100,100]});
		$('#draggable4').draggabilly({ handle: '.handle' });
	});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 拖动 拖拽 拖动插件 拖拽插件 图片拖动 图片拖拽

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

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