jQuery拖拽插件blockDrag.js

来源:https://www.sucaihuo.com/js/3111.html 2017-09-29 22:38浏览(3561) 收藏

一款jQuery拖拽插件blockDrag.js,可以直接鼠标左键拖拽黑色的方块,到想要的方块区域释放即可完成拖拽移动。
jQuery拖拽插件blockDrag.js
分类:悬浮层/弹出层 > 拖动 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需简单设置页面元素的样式,代码如下:

*{
	padding: 0;
	margin: 0;
}
#box{
	height:800px;
	
	position: relative;
	left: 50px;
	top: 50px;
}
#box:after{
	content:".";
	font-size: 0px;
	display: block;
	visibility: none;
	clear: both;
	height: 0;
}
.drag{
	width: 100%;
	height: 100%;
	color: #fff;
	cursor: pointer;
	background: #333;
	text-align: center;
	line-height: 100px;
}

#box .block{
	float: left;
	outline: 1px solid #dfdfdf;
}

页面的body部分,需设置好整个区域和拖拽方块的容器,代码如下:

<div id="box">
	<div class="drag" id="drag">拖拽至指定位置释放</div>
</div>

页面的底部,需引入jQuery库和拖拽插件,并启用插件设置好相应参数,代码如下:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/blockDrag.min.js"></script>
<script type="text/javascript">
//初始化对象
var demo=new blockDrag({block:"(6,8)"});
//设置背景栅格,可根据需要添加
var blockNum=Number(demo.col)*Number(demo.row);
for(var i=0;i<blockNum;i++){
 	$("<div class='block' style='width:"+demo.set.blockW+"px;height:"+demo.set.blockH+"px'></div>").appendTo($("#box"));
}
</script>
标签: 拖动拖拽
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2