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" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script>
  $.fn.draggableXY = function(options) {
    var defaultOptions = {
      distance: 5,
      dynamic: false
    };
    options = $.extend(defaultOptions, options);
    
    this.draggable({
      distance: options.distance,
      start: function (event, ui) {
        ui.helper.data('draggableXY.originalPosition', ui.position || {top: 0, left: 0});
        ui.helper.data('draggableXY.newDrag', true);
      },
      drag: function (event, ui) {
        var originalPosition = ui.helper.data('draggableXY.originalPosition');
        var deltaX = Math.abs(originalPosition.left - ui.position.left);
        var deltaY = Math.abs(originalPosition.top - ui.position.top);
​
        var newDrag = options.dynamic || ui.helper.data('draggableXY.newDrag');
        ui.helper.data('draggableXY.newDrag', false);
​
        var xMax = newDrag ? Math.max(deltaX, deltaY) === deltaX : ui.helper.data('draggableXY.xMax');
        ui.helper.data('draggableXY.xMax', xMax);
​
        var newPosition = ui.position;
        if(xMax) {
          newPosition.top = originalPosition.top;
        }
        if(!xMax){
          newPosition.left = originalPosition.left;
        }
        
        return newPosition;
      }
    });
  };
</script>
<title>draggableXY</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #000; font: 1em Helvetica, Arial; color: #fff; }
div { width: 8em; height: 8em; font-size: 0.8em; background-color: gray; padding: 0.1em; border: 0.1em solid white; }
</style>
</head>
<body>
  <div class="static">You can drag me in both axes!</div>
  <div class="dynamic">You can drag in both axes and you can change axes while you're dragging!</div>
  <script>
    $('div.static').draggableXY();
    $('div.dynamic').draggableXY({dynamic: true});
  </script>
</body>
</html>
 
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers