注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jQuery制作拖拽图标到回收站删除

jquery实例 fishcity 1297浏览

jQuery制作拖拽删除图标

利用jQuery实现拖拽非常简单,我们直接可以利用jQuery ui内部封装的拖拽接口即可简单实现在网页上拖拽任意元素。今天我们就利用jQuery ui的这一特性来实现一个拖拽删除桌面小图标的功能,就像操作系统的回收站一样,我们只需要拖动应用图标至垃圾箱即可删除这个图标。

jquery实例jquery拖拽删除图标

引入核心文件

这里需要引入jqueryjquery ui,与jquery ui css

<link rel="stylesheet" href="assets/css/jquery-ui.css" />
<script src="http://libs.useso.com/js/jquery/1.8.3/jquery.min.js"></script>
<script src="http://libs.useso.com/js/jqueryui/1.9.2/jquery-ui.min.js"></script>

构建html

<div id="main">
  <div class="folder">
    <div class="front"></div>
    <div class="back"></div>
  </div>
   <img src="assets/48px/box.png" style="top:340px;left:100px;" alt="box" /> 
   <img src="assets/48px/calculator.png" style="top:340px;left:170px;" alt="calculator" /> 
   <img src="assets/48px/clipboard.png" style="top:340px;left:240px;" alt="clipboard" /> 
   <img src="assets/48px/console.png" style="top:340px;left:310px;" alt="console" /> 
   <img src="assets/48px/basketball.png" style="top:340px;left:380px;" alt="basketball" /> 
   <img src="assets/48px/facebook.png" style="top:400px;left:100px;" alt="facebook" /> 
   <img src="assets/48px/gift.png" style="top:400px;left:170px;" alt="gift" /> 
   <img src="assets/48px/id_card.png" style="top:400px;left:240px;" alt="id card" /> 
   <img src="assets/48px/imac.png" style="top:400px;left:310px;" alt="imac" /> 
   <img src="assets/48px/system_monitoring.png" style="top:400px;left:380px;" alt="system monitoring" /> 
</div>

核心CSS样式

没有CSS3基础的朋友,请先了解下CSS3,要不下面的CSS会吃力

/*----------------------------
	CSS3文件夹
-----------------------------*/



.folder {
	/* This will enable the 3D effect. Decrease this value 
	 * to make the perspective more pronounced: */
	
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	perspective: 800px; /*镜头距离800PX*/
	
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 0;
	
	width: 160px;
	height: 120px;
	margin: -100px 0 0 -60px;
}

.folder div{
    width:150px;
    height:115px;
    
    background-color:#93bad8;
    
    /* 3D变化保留元素的位置 */
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    
    /*平滑的动画过渡 */
    -webkit-transition:0.5s;
    -moz-transition:0.5s;
    transition:0.5s; 
    
    /*禁止用户选中元素*/
    -webkit-user-select: none;
  	-moz-user-select: none;
  	user-select: none; 
    
    position:absolute;
    top:0;
    left:50%;
    margin-left:-75px;
}


.folder .front{
    
    /*圆角,X轴3D转换30度 */
    border-radius:5px 5px 0 0;
    -moz-transform:rotateX(-30deg);
    -webkit-transform:rotateX(-30deg);
    transform:rotateX(-30deg);
    
     /*定义在X轴与Y轴的位置 */
    -moz-transform-origin:50% 100%;
    -webkit-transform-origin:50% 100%;
    transform-origin:50% 100%;
    
     /*定义渐变效果 */
    background-image: -moz-linear-gradient(top, #93bad8 0%, #6c9dc0 85%, #628faf 100%);
    background-image: -webkit-linear-gradient(top, #93bad8 0%, #6c9dc0 85%, #628faf 100%);
    background-image: linear-gradient(top, #93bad8 0%, #6c9dc0 85%, #628faf 100%);
    
     /*定义阴影 */
    box-shadow:0 -2px 2px rgba(0,0,0,0.1), 0 1px rgba(255,255,255,0.35) inset;
    
    z-index:10;
    
    font: bold 26px sans-serif;
	color: #5A88A9;
	text-align: center;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);
	line-height: 115px;
}

.folder .back{
     /*定义渐变效果 */
    background-image: -webkit-linear-gradient(top, #93bad8 0%, #89afcc 10%, #5985a5 60%);
    background-image: -moz-linear-gradient(top, #93bad8 0%, #89afcc 10%, #5985a5 60%);
    background-image: linear-gradient(top, #93bad8 0%, #89afcc 10%, #5985a5 60%);
    
    /*定义圆角*/
    border-radius:0 5px 0 0;
    /*定义阴影 */
    box-shadow:0 -1px 1px rgba(0,0,0,0.15);
}

 /*在.back前加上内容 */
.folder .back:before{
    content:'';
    width:60px;
    height:10px;
    border-radius:4px 4px 0 0;
    background-color:#93bad8;
    position:absolute;
    top:-10px;
    left:0px;
    box-shadow:0 -1px 1px rgba(0,0,0,0.15);
}

 /*在.back后加上内容 */
.folder .back:after{
    content:'';
    width:100%;
    height:4px;
    border-radius:5px;
    position:absolute;
    bottom:5px;
    left:0px;
    box-shadow:0 4px 8px #333;
}

.folder.open .front{
 /*3D转换50度 */
    -moz-transform:rotateX(-50deg);
    -webkit-transform:rotateX(-50deg);
    transform:rotateX(-50deg);
}


/*----------------------------
	Draggable Icons
-----------------------------*/

#main img{
	position:absolute;
	cursor:move;
}

写入JS

$(function() {

	var folder = $("#main .folder"),   //文件夹
		front = folder.find('.front'), //文件夹前面部分
		img = $("#main img"), //容器main中的所有图片
		droppedCount = 0;    //记数器

	img.draggable(); //使所有图片可以拖拽

	folder.droppable({ //droppable事件,即拖拽到文件夹时触发的事件
		drop : function(event, ui) {//释放时触发
			
			// 移动拖拽的图片
			ui.draggable.remove();
			
			// 给计数器加1
			front.text(++droppedCount);
			
		},
		
		activate : function(){ //拖拽时让文件夹打开
			
			folder.addClass('open');
		},
		
		deactivate : function(){ //停止拖拽时让文件夹关闭
			folder.removeClass('open');
		}
	});
});

嗯,今天的教程就到这了,感谢亲们的耐心观看。

转载请注明:jQ酷 » jQuery制作拖拽图标到回收站删除

下载地址:本站下载 | 百度云
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。