Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple drag demo</title>
<style>
#dragme {
  position:absolute;
  cursor:move;
  background:#eee;
  border:1px solid #333;
  padding:10px;
  width:200px;
  height:120px;
}
</style>
  
<script>
function makeDraggable(element) {
​
  /* Simple drag implementation */
  element.onmousedown = function(event) {
    if(element.setCapture) { element.setCapture(); }
​
    document.onmousemove = function(event) {
      event = event;
      element.style.left = event.clientX + 'px';
      element.style.top = event.clientY + 'px';
      
      console.log('x: ', event.clientX);
      console.log('y: ', event.clientY);
    };
​
    document.onmouseup = function() {
          if(element.releaseCapture) { element.releaseCapture(); }
      console.log('mouseup')
      document.onmousemove = null;
      if(element.releaseCapture) { element.releaseCapture()}
    };
    
    if(element.setCapture) { //element.setCapture(); console.log('set capture')}
  };
​
  /* These 3 lines are helpful for the browser to not accidentally 
   * think the user is trying to "text select" the draggable object.
   * Unfortunately they also break draggability outside the window.
   */
element.unselectable = "on";
  element.onselectstart = function(){return false};
  element.style.userSelect = element.style.MozUserSelect = "none";
}
</script>
</head>
<body onload="makeDraggable(document.getElementById('dragme'))">
<div id="dragme">Drag me (outside window)</div>
​
</body>
</html>
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers