Simple drag concept using css and java script is the one simple concept it is used to drag the content in the div in one place to another place whatever you want you can drag the information in specified div.
SIMPLE DRAG CONCEPT USING CSS AND JAVASCRIPT:
index.php:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>simple drag concept using javascript</title>
<link rel="stylesheet" type="text/css" href="draggable.css">
</head>
<body>
<div id="drag">
drag it
</div>
</body>
<script type="text/javascript" src="draggable.js"></script>
<script type="text/javascript">
new Draggable('drag');
</script>
</html>
draggable.css:
*{
border: 0;
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
#drag{
width: 500px;
height: 100px;
border:2px solid #F30;
background:#FCDEC2;
line-height: 100px;
text-align: center;
cursor: move;
text-transform: uppercase;
}
draggable.js:
var Draggable = function (id) {
var el = document.getElementById(id),
isDragReady = false,
dragoffset = {
x: 0,
y: 0
};
this.init = function () {
//only for this demo
this.initPosition();
this.events();
};
//only for this demo
this.initPosition = function () {
el.style.position = "absolute";
el.style.top = "20px";
el.style.left = "48%";
};
//events for the element
this.events = function () {
var self = this;
_on(el, 'mousedown', function (e) {
isDragReady = true;
//corssbrowser mouse pointer values
e.pageX = e.pageX || e.clientX + (document.documentElement.scrollLeft ?
document.documentElement.scrollLeft :
document.body.scrollLeft);
e.pageY = e.pageY || e.clientY + (document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop);
dragoffset.x = e.pageX - el.offsetLeft;
dragoffset.y = e.pageY - el.offsetTop;
});
_on(document, 'mouseup', function () {
isDragReady = false;
});
_on(document, 'mousemove', function (e) {
if (isDragReady) {
e.pageX = e.pageX || e.clientX + (document.documentElement.scrollLeft ?
document.documentElement.scrollLeft :
document.body.scrollLeft);
e.pageY = e.pageY || e.clientY + (document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop);
el.style.top = (e.pageY - dragoffset.y) + "px";
el.style.left = (e.pageX - dragoffset.x) + "px";
}
});
};
//cross browser event Helper function
var _on = function (el, event, fn) {
document.attachEvent ? el.attachEvent('on' + event, fn) : el.addEventListener(event, fn, !0);
};
this.init();
}
0 Comments