当前位置:
首页 > 党团工作 > 其它 > 网页HTML5图片拖拽分组代码.docx
网页HTML5图片拖拽分组代码.docx
- 文档编号:24045077
- 上传时间:2023-05-23
- 格式:DOCX
- 页数:10
- 大小:58.32KB
网页HTML5图片拖拽分组代码.docx
《网页HTML5图片拖拽分组代码.docx》由会员分享,可在线阅读,更多相关《网页HTML5图片拖拽分组代码.docx(10页珍藏版)》请在冰豆网上搜索。
网页HTML5图片拖拽分组代码
今天我们介绍HTML5的拖拽功能。
基本目前所有的现代浏览器(Firefox,Chrome,Safari,或者Opera)都支持这个实用的功能。
这意味着我们可以考虑在我们的项目和网站中使用这个功能。
更重要的是代码编写非常简单。
我们这里将使用拖拽API开发一个图片的分组排序功能,希望能够给大家比较直观的使用感受。
希望大家喜欢!
(注,文章转自html5中文网)
HTML标签
Album1
Album1
Album3
both">
你可以看到这里我们设定了3个开放的drop对象和12个图片。
我们将可drop的区域使用属性droppable来标示,并且将可drag的对象用draggable来标示。
CSS代码
接下来我们设置页面的样式。
/*PhotoGallerystyles*/
.gallery{
margin:
50pxauto0;
width:
840px;
}
.gallerya{
display:
inline-block;
height:
135px;
margin:
10px;
opacity:
1;
position:
relative;
width:
180px;
-khtml-user-drag:
element;
/*CSS3Preventselections*/
-moz-user-select:
none;
-webkit-user-select:
none;
-khtml-user-select:
none;
user-select:
none;
/*CSS3transitionrules*/
-webkit-transition:
all0.5sease;
-moz-transition:
all0.5sease;
-o-transition:
all0.5sease;
transition:
all0.5sease;
}
.galleryaimg{
border:
8pxsolid#fff;
border-bottom:
20pxsolid#fff;
cursor:
pointer;
display:
block;
height:
100%;
left:
0px;
position:
absolute;
top:
0px;
width:
100%;
z-index:
1;
/*CSS3Boxsizingproperty*/
-moz-box-sizing:
border-box;
-webkit-box-sizing:
border-box;
-o-box-sizing:
border-box;
box-sizing:
border-box;
/*CSS3transitionrules*/
-webkit-transition:
all0.5sease;
-moz-transition:
all0.5sease;
-o-transition:
all0.5sease;
transition:
all0.5sease;
/*CSS3BoxShadow*/
-moz-box-shadow:
2px2px4px#444;
-webkit-box-shadow:
2px2px4px#444;
-o-box-shadow:
2px2px4px#444;
box-shadow:
2px2px4px#444;
}
/*CustomCSS3rotatetransformation*/
.gallerya:
nth-child
(1)img{
-moz-transform:
rotate(-25deg);
-webkit-transform:
rotate(-25deg);
transform:
rotate(-25deg);
}
.gallerya:
nth-child
(2)img{
-moz-transform:
rotate(-20deg);
-webkit-transform:
rotate(-20deg);
transform:
rotate(-20deg);
}
.gallerya:
nth-child(3)img{
-moz-transform:
rotate(-15deg);
-webkit-transform:
rotate(-15deg);
transform:
rotate(-15deg);
}
.gallerya:
nth-child(4)img{
-moz-transform:
rotate(-10deg);
-webkit-transform:
rotate(-10deg);
transform:
rotate(-10deg);
}
.gallerya:
nth-child(5)img{
-moz-transform:
rotate(-5deg);
-webkit-transform:
rotate(-5deg);
transform:
rotate(-5deg);
}
.gallerya:
nth-child(6)img{
-moz-transform:
rotate(0deg);
-webkit-transform:
rotate(0deg);
transform:
rotate(0deg);
}
.gallerya:
nth-child(7)img{
-moz-transform:
rotate(5deg);
-webkit-transform:
rotate(5deg);
transform:
rotate(5deg);
}
.gallerya:
nth-child(8)img{
-moz-transform:
rotate(10deg);
-webkit-transform:
rotate(10deg);
transform:
rotate(10deg);
}
.gallerya:
nth-child(9)img{
-moz-transform:
rotate(15deg);
-webkit-transform:
rotate(15deg);
transform:
rotate(15deg);
}
.gallerya:
nth-child(10)img{
-moz-transform:
rotate(20deg);
-webkit-transform:
rotate(20deg);
transform:
rotate(20deg);
}
.gallerya:
nth-child(11)img{
-moz-transform:
rotate(25deg);
-webkit-transform:
rotate(25deg);
transform:
rotate(25deg);
}
.gallerya:
nth-child(12)img{
-moz-transform:
rotate(30deg);
-webkit-transform:
rotate(30deg);
transform:
rotate(30deg);
}
.gallerya:
hoverimg{
z-index:
5;
/*CSS3transitionrules*/
-webkit-transition:
all0.5sease;
-moz-transition:
all0.5sease;
-o-transition:
all0.5sease;
transition:
all0.5sease;
/*CSS3transformrules*/
-moz-transform:
rotate(0deg);
-webkit-transform:
rotate(0deg);
-o-transform:
rotate(0deg);
transform:
rotate(0deg);
}
.gallerya.hidden{
height:
0;
margin:
0;
opacity:
0;
width:
0;
}
.albums{
margin:
40pxauto0;
overflow:
hidden;
width:
840px;
}
.album{
border:
3pxdashed#ccc;
float:
left;
margin:
10px;
min-height:
100px;
padding:
10px;
width:
220px;
/*CSS3transitionrules*/
-webkit-transition:
all1.0sease;
-moz-transition:
all1.0sease;
-o-transition:
all1.0sease;
transition:
all1.0sease;
}
.albuma{
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;
/*CSS3Preventselections*/
-moz-user-select:
none;
-webkit-user-select:
none;
-khtml-user-select:
none;
user-select:
none;
/*CSS3transitionrules*/
-webkit-transition:
all0.5sease;
-moz-transition:
all0.5sease;
-o-transition:
all0.5sease;
transition:
all0.5sease;
}
.albumaimg{
border:
4pxsolid#fff;
border-bottom:
10pxsolid#fff;
cursor:
pointer;
display:
block;
height:
100%;
left:
0px;
position:
absolute;
top:
0px;
width:
100%;
z-index:
1;
/*CSS3Boxsizingproperty*/
-moz-box-sizing:
border-box;
-webkit-box-sizing:
border-box;
-o-box-sizing:
border-box;
box-sizing:
border-box;
/*CSS3transitionrules*/
-webkit-transition:
all0.5sease;
-moz-transition:
all0.5sease;
-o-transition:
all0.5sease;
transition:
all0.5sease;
/*CSS3BoxShadow*/
-moz-box-shadow:
2px2px4px#444;
-webkit-box-shadow:
2px2px4px#444;
-o-box-shadow:
2px2px4px#444;
box-shadow:
2px2px4px#444;
}
Javascript代码
//addeventhandler
varaddEvent=(function(){
if(document.addEventListener){
returnfunction(el,type,fn){
if(el&&el.nodeName||el===window){
el.addEventListener(type,fn,false);
}elseif(el&&el.length){
for(vari=0;iaddEvent(el[i],type,fn);
}
}
};
}else{
returnfunction(el,type,fn){
if(el&&el.nodeName||el===window){
el.attachEvent('on'+type,function(){returnfn.call(el,window.event);});
}elseif(el&&el.length){
for(vari=0;iaddEvent(el[i],type,fn);
}
}
};
}
})();
//innervariables
vardragItems;
updateDataTransfer();
vardropAreas=document.querySelectorAll('[droppable=true]');
//preventDefault(stopsthebrowserfromredirectingofftothetext)
functioncancel(e){
if(e.preventDefault){
e.preventDefault();
}
returnfalse;
}
//updateeventhandlers
functionupdateDataTransfer(){
dragItems=document.querySelectorAll('[draggable=true]');
for(vari=0;iaddEvent(dragItems[i],'dragstart',function(event){
event.dataTransfer.setData('obj_id',this.id);
returnfalse;
});
}
}
//dragovereventhandler
addEvent(dropAreas,'dragover',function(event){
if(event.preventDefault)event.preventDefault();
//littlecustomization
this.style.borderColor="#000";
returnfalse;
});
//dragleaveeventhandler
addEvent(dropAreas,'dragleave',function(event){
if(event.preventDefault)event.preventDefault();
//littlecustomization
this.style.borderColor="#ccc";
returnfalse;
});
//dragentereventhandler
addEvent(dropAreas,'dragenter',cancel);
//dropeventhandler
addEvent(dropAreas,'drop',function(event){
if(event.preventDefault)event.preventDefault();
//getdroppedobject
variObj=event.dataTransfer.getData('obj_id');
varoldObj=document.getElementById(iObj);
//getitsimagesrc
varoldSrc=oldObj.childNodes[0].src;
oldObj.className+='hidden';
varoldThis=this;
setTimeout(function(){
oldObj.parentNode.removeChild(oldObj);//removeobjectfromDOM
//addsimilarobjectinanotherplace
oldThis.innerHTML+='';
//andupdateeventhandlers
updateDataTransfer();
//littlecustomization
oldThis.style.borderColor="#ccc";
},500);
returnfalse;
});
可以看到以上代码并不复杂。
开始我们选择所有的可拖放的元素。
然后将'dragstart'事件绑定到所有的draggable元素上,这样讲数据设定到dataTransfer对象中。
对于所有的droppable区域我们绑定这些事件:
'dragover','dragleave'和'drop'。
针对前两个方法我们执行一个小的CSS自定义来激活drop区域。
当我们放置可拖放的元素的时候,我们的脚本会复制可拖放元素并且将它们放置到活动的droppable区域(即相册),并且删除那个dropped元素。
最后我们更新事件处理。
希望大家喜欢这个HTML5的图片拖放展示效果。