Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!doctype html>
<html ng-app>
  <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta name="description" content="Jquery Drag Test Working" />
  </head>
  <body>
    <br/><br/>
    <span id="test" class="drag-hint TKCursorDragHorizontal TKAdjustableNumber"><span>drag</span>Mouse and drag hello there</span>
  </body>
</html>
 
.drag-hint {
  position:relative;
}
.drag-hint > span{
  display:none;
}
.drag-hint:hover > span {
  display: inline;
  position:absolute;
  top: -25px;
  left: 0;
  right: 0;
  text-align: center;
}
.TKCursorDragHorizontal {
    cursor: pointer;
    cursor: move;
    cursor: col-resize;
}
/* TKAdjustableNumber */
.TKAdjustableNumber {
    position:relative;
    color: #46f;
    border-bottom: 1px dashed #46f;
}
 
// Calculate pageX/Y if missing and clientX/Y available
function setPageCoords(event) {
if ( event.pageX == null && event.clientX != null ) {
  var doc = document.documentElement, body = document.body;
  event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
  event.pageY = event.clientY + (doc && doc.scrollTop  || body && body.scrollTop  || 0) - (doc   && doc.clientTop  || body && body.clientTop  || 0);
}
}
var elm = document.getElementById("test");
var dragging = false;
var dragStart, dragEnd;
elm.addEventListener("mousedown", function(e) {
  setPageCoords(e);
  dragStart = {x: e.pageX, y: e.pageY};
  dragging = true;
});
document.addEventListener("mousemove", function(e) {
  if (!dragging) return;
  setPageCoords(e);
  console.log(e.pageX - dragStart.x);
});
document.addEventListener("mouseup", function(e) {
  if (!dragging) return;
  setPageCoords(e);
  dragEnd = {x: e.pageX, y: e.pageY};
  dragging = false;
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
jonahxpro
0viewers