87,910
社区成员
发帖
与我相关
我的任务
分享图片拖放轻松实现相册内容组织，HTML5 实现
图片拖放轻松实现相册内容组织，HTML5 实现， IE 10 以下版本不支持哦
演示地址：http://t.cn/zWJ5NgY
演示地址：http://t.cn/zWJ5NgY
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>HTML5 拖放实现相片分类</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
/* 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;
}
.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;
}
</style>
</head>
<body>
<div style="text-align:center;">
<h2>将下面的图片拖拽到各相册中实现分类，也可在相册之间拖放来组织相册内容</h2>
源代码出处：http://www.script-tutorials.com/demos/255/index.html
</div>
<div class="albums">
<div class="album" id="drop_1" droppable="true"><h2>相册1</h2></div>
<div class="album" id="drop_2" droppable="true"><h2>相册2</h2></div>
<div class="album" id="drop_3" droppable="true"><h2>相册3</h2></div>
</div>
<div style="clear:both"></div>
<div class="gallery">
<a id="1" draggable="true"><img src="images/1.jpg"></a>
<a id="2" draggable="true"><img src="images/2.jpg"></a>
<a id="3" draggable="true"><img src="images/3.jpg"></a>
<a id="4" draggable="true"><img src="images/4.jpg"></a>
<a id="5" draggable="true"><img src="images/5.jpg"></a>
<a id="6" draggable="true"><img src="images/6.jpg"></a>
<a id="7" draggable="true"><img src="images/7.jpg"></a>
<a id="8" draggable="true"><img src="images/8.jpg"></a>
<a id="9" draggable="true"><img src="images/9.jpg"></a>
<a id="10" draggable="true"><img src="images/10.jpg"></a>
<a id="11" draggable="true"><img src="images/11.jpg"></a>
<a id="12" draggable="true"><img src="images/12.jpg"></a>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
做一个有理想的码农 2012-07-17
- 打赏
- 举报
我复制了你的代码。。为什么我的拖不进去呢？是不是还缺啥配置文件？
it491328322 2012-07-17
- 打赏
- 举报
收藏了。最近正好在学习html5的东东。。。
liusoft 2012-07-17
- 打赏
- 举报
var aImgs = [
'http://static.oschina.net/uploads/space/2012/0709/105428_4aoW_28.jpg',
'http://static.oschina.net/uploads/space/2012/0607/142131_2PqS_28.jpg',
'http://www.oschina.net/img/events/shenzhen-20120526.jpg',
'http://www.oschina.net/img/events/chengdu-20120415.jpg',
'http://www.oschina.net/img/events/shanghai-20120107.jpg',
'http://www.oschina.net/img/events/shenzhen-20111210.jpg',
'http://www.oschina.net/img/events/zhuhai-20111105.jpg',
'http://www.oschina.net/img/events/shenzhen-20110626.jpg',
'http://static.oschina.net/uploads/space/2012/0709/105428_4aoW_28.jpg',
'http://static.oschina.net/uploads/space/2012/0607/142131_2PqS_28.jpg',
'http://www.oschina.net/img/events/shenzhen-20120526.jpg',
'http://www.oschina.net/img/events/zhuhai-20111105.jpg'
];
$(function(){
$(".gallery").find("img").each(function(idx){
$(this).attr("src",aImgs[idx]);
});
});
// 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;
});
