HTML5 拖放：在相册中对照片进行排序

首页 > 代码库 > HTML5 拖放：在相册中对照片进行排序

HTML5 拖放：在相册中对照片进行排序

2024-07-20 04:08:21 219人阅读

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="http://www.mamicode.com/images/1.jpg"></a>
<a id="2" draggable="true"><img src="http://www.mamicode.com/images/2.jpg"></a>
<a id="3" draggable="true"><img src="http://www.mamicode.com/images/3.jpg"></a>
<a id="4" draggable="true"><img src="http://www.mamicode.com/images/4.jpg"></a>
<a id="5" draggable="true"><img src="http://www.mamicode.com/images/5.jpg"></a>
<a id="6" draggable="true"><img src="http://www.mamicode.com/images/6.jpg"></a>
<a id="7" draggable="true"><img src="http://www.mamicode.com/images/7.jpg"></a>
<a id="8" draggable="true"><img src="http://www.mamicode.com/images/8.jpg"></a>
<a id="9" draggable="true"><img src="http://www.mamicode.com/images/9.jpg"></a>
<a id="10" draggable="true"><img src="http://www.mamicode.com/images/10.jpg"></a>
<a id="11" draggable="true"><img src="http://www.mamicode.com/images/11.jpg"></a>
<a id="12" draggable="true"><img src="http://www.mamicode.com/images/12.jpg"></a>
</div>
<script src="http://www.mamicode.com/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 = http://www.mamicode.com/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="http://www.mamicode.com/‘+oldSrc+‘" /></a>‘;

// and update event handlers
updateDataTransfer();

// little customization
oldThis.style.borderColor = "#ccc";
}, 500);

return false;
});

HTML5 拖放：在相册中对照片进行排序

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > HTML5 拖放：在相册中对照片进行排序

HTML5 拖放：在相册中对照片进行排序

看完仍有疑问？有类似问题直接问程序猿