SIMPLE DRAG CONCEPT USING CSS AND JAVASCRIPT | Sanwebcorner

SIMPLE DRAG CONCEPT USING CSS AND JAVASCRIPT

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

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();
}




Download Code: