we can Drag the Image and Drop any places using Html5 and Css3.
------------------------------------- CSS CODE -------------------------------------
.gallery { margin:50px auto 0; width:420px; float:left; }
.gallery a { display:inline-block; height:135px; margin:10px; opacity:1; position:relative; width:180px; -khtml-user-drag:element;
-moz-user-select:none; -webkit-user-select:none; -khtml-user-select:none; user-select:none; -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
ointer; display:block; height:100%; left:0px;
position:absolute; top:0px; width:100%; z-index:1; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box;
box-sizing:border-box; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease;
-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; }
.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:hover img { z-index:5; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease;
transition:all 0.5s ease; -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 { overflow:hidden; width:280px; float:left; }
.album { border:2px solid #ccc; float:left; margin:10px; min-height:200px; padding:10px; width:220px; -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; -moz-user-select:none; -webkit-user-select:none;
-khtml-user-select:none; user-select:none; -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
ointer; display:block; height:100%; left:0px; position:absolute;
top:0px; width:100%; z-index:1; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box;
-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease;
-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; }
------------------------------------- HTML CODE ------------------------------------
<div class="albums"><div class="album" id="drop_1" droppable="true"><h3>Muthujoo Photo Album</h3></div></div>
<div class="gallery">
</div>
<script src="main.js"></script>
------------------------------------- JAVA SCRIPT CODE -----------------------------
javascript code using body section in the html file
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);
}
}
};
}
})();
var dragItems;
updateDataTransfer();
var dropAreas = document.querySelectorAll('[droppable=true]');
function cancel(e) {
if (e.preventDefault) {
e.preventDefault();
}
return false;
}
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;
});
}
}
addEvent(dropAreas, 'dragover', function (event) {
if (event.preventDefault) event.preventDefault();
this.style.borderColor = "#000";
return false;
});
addEvent(dropAreas, 'dragleave', function (event) {
if (event.preventDefault) event.preventDefault();
this.style.borderColor = "#ccc";
return false;
});
addEvent(dropAreas, 'dragenter', cancel);
addEvent(dropAreas, 'drop', function (event) {
if (event.preventDefault) event.preventDefault();
var iObj = event.dataTransfer.getData('obj_id');
var oldObj = document.getElementById(iObj);
var oldSrc = oldObj.childNodes[0].src;
oldObj.className += 'hidden';
var oldThis = this;
setTimeout(function() {
oldObj.parentNode.removeChild(oldObj);
oldThis.innerHTML += '
updateDataTransfer();
oldThis.style.borderColor = "#ccc";
}, 500);
return false;
});
------------------------------------- USING IMAGES ---------------------------------
