(难度:18%)可拖动的照片管理系统

木木钧

于 2014-06-02 09:46:04 发布

阅读量702

点赞数

文章标签：图片 jquery ui js jquery

本文链接：https://blog.csdn.net/lj654548718/article/details/28091955

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

</pre><pre code_snippet_id="373047" snippet_file_name="blog_20140602_1_6893224" name="code" class="html"><!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Sortable - Portlets</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <script src="./index.js"></script>
  <link rel="stylesheet" type="text/css" href="./index.css">
</script>
<body>
	<div class="drag_panel">
			<div class="box">
				<div class="title">aa</div>
				<img src="./1.jpg">
				<!-- <div class="content">aaaaaaaaaaaaaaaaaaaaaa</div> -->
			</div>
			<div class="box">
				<div class="title">bb</div>
				<img src="./1.jpg">
				<!-- <div class="content">bbbbbbbbbbbaaaaaaaaaaa</div> -->
			</div>
			<div class="box">
				<div class="title">cc</div>
				<img src="./1.jpg">
				<!-- <div class="content">cccccccccccaaaaaaaaaaa</div> -->
			</div>
			<div class="box">
				<div class="title">dd</div>
				<img src="./1.jpg">
				<!-- <div class="content">cccccccccccaaaaaaaaaaa</div> -->
			</div>
			<div class="box">
				<div class="title">ee</div>
				<img src="./1.jpg">
				<!-- <div class="content">cccccccccccaaaaaaaaaaa</div> -->
			</div>
			<div class="box">
				<div class="title">ff</div>
				<img src="./1.jpg">
				<!-- <div class="content">dddddddddddaaaaaaaaaaa</div> -->
			</div>
			<div class="box">
				<div class="title">gg</div>
				<img src="./1.jpg">
				<!-- <div class="content">eeeeeeeeeeeaaaaaaaaaaa</div> -->
			</div>
	</div>
	<div class="trash">
		<div class="title">回收站( 空 )</div>
		<div class="content"></div>
	</div>
</body>
</html>

js文件(index.js):

jQuery(function(){
	$(".drag_panel > .box").draggable({
		containment: "document",
		revert:'invalid',
		opacity:0.5
	});
	$(".drag_panel").droppable({
		accept:".trash > .content > .box",
		activeClass:"panel-active",
		drop:function(event,ui){
			$item=ui.draggable;
			if ($(".trash > .box").length==0){
				$(".trash > .title").text("回收站( 空 )");
			}
			$item.fadeOut(function(){
				$item
				.appendTo($(".drag_panel"))
				.fadeIn(250)
				.animate({
					top:'0px',
					left:'0px',
					opacity:'1'
				},250)
			})
		}
	})
	$(".trash").droppable({
		accept:".drag_panel > .box",
		activeClass: "trash-active",
		drop:function(event,ui){
			$(".trash > .title").text("回收站");
			$item=ui.draggable;
			$item.fadeOut(function(){			
				$item
				.appendTo($(".trash .content"))
				.fadeIn(250)
				.animate({
					top:'0px',
					left:'0px'
				},250)
			});
		}
	})
});

css文件:

body{
	width:90%;
}
.drag_panel{
	width:75%;
	float: left;
}
.drag_panel .box{
	text-align: center;
	float: left;
	margin:15px;
	width:65px;
	border:1px solid gray;
	cursor: move;
}
.drag_panel .title{
	overflow: hidden;
	background: black;
	color: white;
	padding: 3px;
}
.drag_panel  img{
	width: 60px;
}
.drag_panel .content{
	padding: 15px;
	word-wrap:break-word;
}
.trash{
	margin:15px;
	float:right;
	width:20%;
	border:1px solid gray;
	min-height: 100px;
}
.trash > .title{
	background: black;
	color: white;
	padding: 5px;
	font-size: 18px; 
}

.trash .content{
	
	word-wrap:break-word;
}
.trash .box{
	text-align: center;
	float: left;
	margin:5px;
	width:40px;
	border:1px solid gray;
	cursor: move;
}
.trash .box .title{
	overflow: hidden;
	background: black;
	color: white;
	padding: 5px;
	font-size: 12px; 
}
.trash .box img{
	width: 30px;
}
.trash-active{
	background: gray;
}
.panel-active{
	border: 1px solid black
}

运行效果如下:

(把图片拖到右边的回收站)

(把图片从回收站拖回来)

更多实际效果请参阅:在线演示

木木钧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
(难度:18%)可拖动的照片管理系统

jQuery UI Sortable - Portlets aa aaaaaaaaaaaaaaaaaaaaaa --> bb bbbbbbbbbbbaaaaaaaaaaa --> cc cccccccccccaaaaaaaaaaa -->
复制链接

扫一扫