HTML5 拖放:在相册中对照片进行排序
1. [代码]index.html
<div class="albums">
<div class="album" id="drop_1" droppable="true"><h2>Album 1</h2></div>
<div class="album" id="drop_2" droppable="true"><h2>Album 1</h2></div>
<div class="album" id="drop_3" droppable="true"><h2>Album 3</h2></div>
</div>
<div ></div>
<div class="gallery">
<a id="1" draggable="true"><img src="data:images/1.jpg"></a>
<a id="2" draggable="true"><img src="data:images/2.jpg"></a>
<a id="3" draggable="true"><img src="data:images/3.jpg"></a>
<a id="4" draggable="true"><img src="data:images/4.jpg"></a>
<a id="5" draggable="true"><img src="data:images/5.jpg"></a>
<a id="6" draggable="true"><img src="data:images/6.jpg"></a>
<a id="7" draggable="true"><img src="data:images/7.jpg"></a>
<a id="8" draggable="true"><img src="data:images/8.jpg"></a>
<a id="9" draggable="true"><img src="data:images/9.jpg"></a>
<a id="10" draggable="true"><img src="data:images/10.jpg"></a>
<a id="11" draggable="true"><img src="data:images/11.jpg"></a>
<a id="12" draggable="true"><img src="data:images/12.jpg"></a>
</div>
<script src="js/main.js"></script>
2. [代码]css/main.css
/* Photo Gallery styles */
.gallery {
margin: 50px auto 0;
width: 840px;
}
.gallery a {
display: inline-block;
height: 135px;
margin: 10px;
opacity: 1;
position: relative;
width: 180px;
-khtml-user-drag: element;
/* CSS3 Prevent selections */
-moz-user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
user-select: none;
/* CSS3 transition rules */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.gallery a img {
border: 8px solid #fff;
border-bottom: 20px solid #fff;
cursor: pointer;
display: block;
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
z-index: 1;
/* CSS3 Box sizing property */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
/* CSS3 transition rules */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
/* CSS3 Box Shadow */
-moz-box-shadow: 2px 2px 4px #444;
-webkit-box-shadow: 2px 2px 4px #444;
-o-box-shadow: 2px 2px 4px #444;
box-shadow: 2px 2px 4px #444;
}
/* Custom CSS3 rotate transformation */
.gallery a:nth-child(1) img {
-moz-transform: rotate(-25deg);
-webkit-transform: rotate(-25deg);
transform: rotate(-25deg);
}
.gallery a:nth-child(2) img {
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.gallery a:nth-child(3) img {
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
.gallery a:nth-child(4) img {
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.gallery a:nth-child(5) img {
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.gallery a:nth-child(6) img {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.gallery a:nth-child(7) img {
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
.gallery a:nth-child(8) img {
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
.gallery a:nth-child(9) img {
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
.gallery a:nth-child(10) img {
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
.gallery a:nth-child(11) img {
-moz-transform: rotate(25deg);
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
.gallery a:nth-child(12) img {
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.gallery a:hover img {
z-index: 5;
/* CSS3 transition rules */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
/* CSS3 transform rules */
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.gallery a.hidden {
height: 0;
margin: 0;
opacity: 0;
width: 0;
}
.albums {
margin: 40px auto 0;
overflow: hidden;
width: 840px;
}
.album {
border: 3px dashed #ccc;
float: left;
margin: 10px;
min-height: 100px;
padding: 10px;
width: 220px;
/* CSS3 transition rules */
-webkit-transition: all 1.0s ease;
-moz-transition: all 1.0s ease;
-o-transition: all 1.0s ease;
transition: all 1.0s ease;
}
.album a {
display: inline-block;
height: 56px;
margin: 15px;
opacity: 1;
position: relative;
width: 75px;
-khtml-user-drag: element;
-webkit-user-drag: element;
-khtml-user-select: none;
-webkit-user-select: none;
/* CSS3 Prevent selections */
-moz-user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
user-select: none;
/* CSS3 transition rules */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}http://www.huiyi8.com/hunsha/chuangyi/
.album a img {创意婚纱照片
border: 4px solid #fff;
border-bottom: 10px solid #fff;
cursor: pointer;
display: block;
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
z-index: 1;
/* CSS3 Box sizing property */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
/* CSS3 transition rules */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
/* CSS3 Box Shadow */
-moz-box-shadow: 2px 2px 4px #444;
-webkit-box-shadow: 2px 2px 4px #444;
-o-box-shadow: 2px 2px 4px #444;
box-shadow: 2px 2px 4px #444;
}
4. [代码]js/main.js
// add event handler
var addEvent = (function () {
if (document.addEventListener) {
return function (el, type, fn) {
if (el && el.nodeName || el === window) {
el.addEventListener(type, fn, false);
} else if (el && el.length) {
for (var i = 0; i < el.length; i++) {
addEvent(el[i], type, fn);
}
}
};
} else {
return function (el, type, fn) {
if (el && el.nodeName || el === window) {
el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
} else if (el && el.length) {
for (var i = 0; i < el.length; i++) {
addEvent(el[i], type, fn);
}
}
};
}
})();
// inner variables
var dragItems;
updateDataTransfer();
var dropAreas = document.querySelectorAll('[droppable=true]');
// preventDefault (stops the browser from redirecting off to the text)
function cancel(e) {
if (e.preventDefault) {
e.preventDefault();
}
return false;
}
// update event handlers
function updateDataTransfer() {
dragItems = document.querySelectorAll('[draggable=true]');
for (var i = 0; i < dragItems.length; i++) {
addEvent(dragItems[i], 'dragstart', function (event) {
event.dataTransfer.setData('obj_id', this.id);
return false;
});
}
}
// dragover event handler
addEvent(dropAreas, 'dragover', function (event) {
if (event.preventDefault) event.preventDefault();
// little customization
this.style.borderColor = "#000";
return false;
});
// dragleave event handler
addEvent(dropAreas, 'dragleave', function (event) {
if (event.preventDefault) event.preventDefault();
// little customization
this.style.borderColor = "#ccc";
return false;
});
// dragenter event handler
addEvent(dropAreas, 'dragenter', cancel);
// drop event handler
addEvent(dropAreas, 'drop', function (event) {
if (event.preventDefault) event.preventDefault();
// get dropped object
var iObj = event.dataTransfer.getData('obj_id');
var oldObj = document.getElementById(iObj);
// get its image src
var oldSrc = oldObj.childNodes[0].src;
oldObj.className += 'hidden';
var oldThis = this;
setTimeout(function() {
oldObj.parentNode.removeChild(oldObj); // remove object from DOM
// add similar object in another place
oldThis.innerHTML += '<a id="'+iObj+'" draggable="true"><img src="'+oldSrc+'" /></a>';
// and update event handlers
updateDataTransfer();
// little customization
oldThis.style.borderColor = "#ccc";
}, 500);
return false;
});
HTML5 拖放:在相册中对照片进行排序的更多相关文章
- android: 从相册中选择照片
虽然调用摄像头拍照既方便又快捷,但并不是每一次我们都需要去当场拍一张照片的. 因为每个人的手机相册里应该都会存有许许多多张照片,直接从相册里选取一张现有的照 片会比打开相机拍一张照片更加常用.一个优秀 ...
- jsp实现仿QQ空间新建多个相册名称,向相册中添加照片
工具:Eclipse,Oracle,smartupload.jar:语言:jsp,Java:数据存储:Oracle. 实现功能介绍: 主要是新建相册,可以建多个相册,在相册中添加多张照片,删除照片,删 ...
- Android--从相册中选取照片并返回结果
启动系统相册去选择图片 //从相册中选取的方法 private void selectPhoto(){ Intent intent = new Intent(Intent.ACTION_PICK); ...
- iOS相册中图片按照时间排序
ios相册默认是按照时间从过去到现在排列,图片顺序有正序和逆序,group可以用以下方法来选择顺序 /** @param NSIndexSet 需要获取的相册中图片范围 @param NSEnumer ...
- swift -从相册中选择照片并上传
选择本地图片并上传是应用开发中一个比较常见的功能. 原文出自:www.hangge.com 转载请保留原文链接:http://www.hangge.com/blog/cache/det ...
- iOS 删除相册中照片--来自简书
来自:http://www.jianshu.com/p/ac18aa3f28c2 最近公司的app有一个新功能是在app中删除相册的照片 ,本来是一个比较简单地功能,在做的过程中却发现AssetsLi ...
- Swift - 从相册中选择视频(过滤掉照片,使用UIImagePickerController)
(本文代码已升级至Swift4) 有时我们需要从系统相册中选择视频录像,来进行编辑或者上传操作,这时使用 UIImagePickerController 就可以实现. 默认情况下,UIImagePic ...
- HTML5 拖放
拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 浏览器支持 I ...
- HTML5拖放API
拖放事件事件提供了拖放可以控制几乎所有方面的拖放操作.棘手的部分是确定每个事件触发:在拖项目火:别人火下降的目标.拖动项时,以下事件(按照这个顺序): 拖曳开始拖dragend此刻你把鼠标按钮和开始移 ...
随机推荐
- JAVA Eclipse开发Android如何设置滚动条最大值最小值
最小值默认为0,你最好在实现逻辑中修改 最大值为max 初始值为progress <SeekBar android:id="@+id/seekBarSpeedMov ...
- Linux系统编程_1_文件夹读取(实现简单ls命令)
闲来无事.随便写写,实现简单的ls命令: | 1 #include <stdio.h> | 2 #include <stdlib.h> | 3 #include <dir ...
- C#托付之愚见
C#托付起源 近期參加实习和奔走于各大招聘会,被问及非常多技术方面的问题.C#问的较多的就是托付和linq. linq之前已经写过一篇文章,能够參见 http://blog.csdn.net/yzys ...
- PHP之面向对象学习
1.类 Class lio{ Public Protect Private Function __constructor(){} } 2.类的实例化 <? php class lio{ //定义 ...
- Neural Turing Machines-NTM系列(一)简述
Neural Turing Machines-NTM系列(一)简述 NTM是一种使用Neural Network为基础来实现传统图灵机的理论计算模型.利用该模型.能够通过训练的方式让系统"学 ...
- svn:冲突(<<<<<<.mine ==== >>>>>>.xxxx)
http://blog.csdn.net/u014000377/article/details/50605895 在svn更新文件时会产生有冲突的文件,一般有两种解决办法: 1.更新文件之前直接查看对 ...
- FileUpload控件预览图片
HTML代码: <tr> <td class="auto-style1">上传图片:</td> <td> <asp:FileU ...
- JAVA进阶-多线程(2)
堵塞队列: 1)BlockingQueue该接口提供了: add()/remove() 假设当队列没有数据,从队列中取数据;或者队列中数据已满, 向队列中加入数据;则会抛出异常. put()/take ...
- Java正确获取客户端真实IP方法整理
在JSP里,获取客户端的IP地址的方法是:request.getRemoteAddr(),这种方法在大部分情况下都是有效的.但是在通过了Apache,Squid等反向代理软件就不能获取到客户端的真实I ...
- python推荐系统库
Python推荐系统库——Surprise 在Python中实现你自己的推荐系统 python-recsys:一款实现推荐系统的python库