网页HTML5图片拖拽分组代码.docx

你可以看到这里我们设定了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;i

addEvent（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;i

addEvent（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;i

addEvent（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的图片拖放展示效果。