Drag'n Drop + Move
HTML
<div id="target" class="dragndrop">Helo</div>
CSS
#target {
height:300px;
background-color:#9CF;
}
.dragndrop {
overflow:hidden;
position:relative;
}
.sizeChange {
background-color:rgba(255,255,255,0.8);
font-size:10px;
padding:5px;
}
JavaScript
(function($) {
this.DragnDrop = new Class({
Implements: [Options,Events],
options: {
target: '.dragndrop',
onDragover:$empty,
onDrop:$empty,
onDragleave:$empty,
onDragenter:$empty
},
initialize: function(options) {
this.setOptions(options);
$$(this.options.target).each(function(el,i){
if(el.get('tag') == 'img'){
el = this.createWrapper(el);
}
el.ondrop=function(e){
e.preventDefault();
this.fileDrop(e.dataTransfer.files[0],el);
this.fireEvent('drop',el);
}.bind(this);
el.ondragover=function(e){
e.preventDefault();
this.fireEvent('dragover',el);
}.bind(this);
el.ondragleave=function(e){
e.preventDefault();
this.fireEvent('dragleave',el);
}.bind(this);
el.ondragenter=function(e){
e.preventDefault();
this.fireEvent('dragenter',el);
}.bind(this);
},this);
},
createWrapper:function(el){
var className = this.options.target.replace('.','');
var wrap = new Element('div',{'class':el.className+' '+className,'styles':{'background':'url('+el.src+') no-repeat left top','width':el.getSize().x, 'height':el.getSize().y,'position':'relative'}});
wrap.inject(el,"before");
el.destroy();
return wrap;
},
fileDrop:function(file,el){
if (!file) {
return;
}
if(!file.type.match(/image\/\w+/)){
alert('画像をドロップしてください。');
}
var img = new Element("img");
img.addEvent('mousewheel', function(e){
e.stop();
...