JavaScript DHTML/jQuery/UI Draggable — различия между версиями

Версия 10:02, 26 мая 2010

Содержание

1 Add border to the draggable
2 Add dragging stopped event handler
3 Add knobHandles
4 Can only drag along with axis y
5 Change cursor for draggable tag
6 Disable, enable and destroy the draggable object
7 Drag along a grid
8 Drag delay
9 jQuery UI Draggable - Auto-scroll
10 jQuery UI Draggable - Constrain movement
11 jQuery UI Draggable - Cursor style
12 jQuery UI Draggable - Default functionality
13 jQuery UI Draggable - Delay start
14 jQuery UI Draggable - Events
15 jQuery UI Draggable - Handles
16 jQuery UI Draggable - Revert position
17 jQuery UI Draggable - Snap to element or grid
18 jQuery UI Draggable + Sortable
19 jQuery UI Draggable - Visual feedback
20 Only draggable inside parent
21 revert: true (fly back)
22 Set cursor position for the draggable
23 Set the handles for all directions
24 Snap to another
25 start and stop events

Add border to the draggable

 
<html lang="en">
<head>
  <title></title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.draggable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <script type="text/javascript">
    $(function() {
    var dragOpts = {  
      helper:helperMaker
    };
    function helperMaker() {
      return $("<div>").css({
        border: "4px solid #cccccc",
       opacity: "0.5",
       height: "110px",
       width: "120px"
      });
    }
    
      $("#drag").draggable(dragOpts);
    });
  </script>
</head>
<body>
    <div id="drag">Move me</div>
</body>
</html>

Add dragging stopped event handler

 
<html lang="en">
<head>
  <title></title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.draggable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <script type="text/javascript">
    $(function() {
      var dragOpts = {
        helper: "clone",  
        stop: getNewPos
      };
      
      function getNewPos(e, ui) {
      
        e.stopPropagation();      
        alert(ui.position.top + "px from the top, " + ui.position.left + "px to the left of the original object.");
        alert(ui.absolutePosition.top + "px from the top, and " + ui.absolutePosition.left + "px to the left relative to the page.");
      }
    
    
      $("#drag").draggable(dragOpts);
    });
  </script>
</head>
<body>
    <div id="container">
          <div id="drag">asdf</div>
    </div>
</body>
</html>

Add knobHandles

 
<html lang="en">
<head>
  <title></title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.resizable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <script type="text/javascript">
    $(function() {
        var resizeOpts = {
          knobHandles: true,
          autoHide: true
        }
        $(".resize").resizable(resizeOpts);
    });
  </script>
</head>
<body>
    <div class="resize"">asdf
      
    </div>
</body>
</html>

Can only drag along with axis y

 
<html lang="en">
<head>
  <title></title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.draggable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <script type="text/javascript">
    $(function() {
        //define config object
        var dragOpts = {
          cursor: "move",
          axis: "y",
          distance: "30",
          cursorAt: {
            top: 0,
            left: 0
          } 
        };
        $("#drag").draggable(dragOpts);
    });
  </script>
</head>
<body>
    <div id="drag">Move me</div>
</body>
</html>

Change cursor for draggable tag

 
<html lang="en">
<head>
  <title></title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.draggable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <script type="text/javascript">
    $(function() {
        //define config object
        var dragOpts = {
          cursor: "move"
        };
        $("#drag").draggable(dragOpts);
    });
  </script>
</head>
<body>
    <div id="drag">Move me</div>
</body>
</html>

Disable, enable and destroy the draggable object

 
<html lang="en">
<head>
  <title></title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.draggable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <script type="text/javascript">
    $(function() {
        $("#drag").draggable();
        
        //define function to toggle draggability
        function toggle(action) {
          (action == "destroy") ? $("#drag").draggable(action).removeClass("drag") : $("#drag").draggable(action);   
        } 
          
        //define click handler for buttons
        $("button").click(function() {
          toggle($(this).attr("id"));
        });
    });
  </script>
</head>
<body>
    <button id="disable">Disable</button>
    <button id="enable">Enable</button>
    <button id="destroy">Destroy</button>
    <div id="drag">asdf</div>

</body>
</html>

Drag along a grid

 
<html lang="en">
<head>
  <title></title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.draggable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <script type="text/javascript">
    $(function() {
        //define config object
        var dragOpts = {
                  delay: "500",
                  grid: [100,100]
        };
        $("#drag").draggable(dragOpts);
    });
  </script>
</head>
<body>
    <div id="drag">Move me</div>
</body>
</html>

Drag delay

 
<html lang="en">
<head>
  <title></title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.draggable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <script type="text/javascript">
    $(function() {
        //define config object
        var dragOpts = {
                  delay: "500",
                  grid: [100,100]
        };
        $("#drag").draggable(dragOpts);
    });
  </script>
</head>
<body>
    <div id="drag">Move me</div>
</body>
</html>

jQuery UI Draggable - Auto-scroll

  
<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Draggable - Auto-scroll</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.draggable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
  #draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
  </style>
  <script type="text/javascript">
  $(function() {
    $("#draggable").draggable({ scroll: true });
    $("#draggable2").draggable({ scroll: true, scrollSensitivity: 100 });
    $("#draggable3").draggable({ scroll: true, scrollSpeed: 100 });
  });
  </script>
</head>
<body>
<div class="demo">
  
<div id="draggable" class="ui-widget-content">
  <p>Scroll set to true, default settings</p>
</div>
<div id="draggable2" class="ui-widget-content">
  <p>scrollSensitivity set to 100</p>
</div>
<div id="draggable3" class="ui-widget-content">
  <p>scrollSpeed set to 100</p>
</div>
<div style="height: 5000px; width: 1px;"></div>
</div><!-- End demo -->
<div class="demo-description">
<p>
Automatically scroll the document when the draggable is moved beyond the viewport. Set the <code>scroll</code> option to true to enable auto-scrolling, and fine-tune when scrolling is triggered and its speed with the <code>scrollSensitivity</code> and <code>scrollSpeed</code> options.
</p>
</div><!-- End demo-description -->
</body>
</html>

jQuery UI Draggable - Constrain movement

  
<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Draggable - Constrain movement</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.draggable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
  .draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
  #draggable, #draggable2 { margin-bottom:20px; }
  #draggable { cursor: n-resize; }
  #draggable2 { cursor: e-resize; }
  #containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px;}
  </style>
  <script type="text/javascript">
  $(function() {
    $("#draggable").draggable({ axis: "y" });
    $("#draggable2").draggable({ axis: "x" });
    
    $("#draggable3").draggable({ containment: "#containment-wrapper", scroll: false });
    $("#draggable4").draggable({ containment: "#demo-frame" });
    $("#draggable5").draggable({ containment: "parent" });
  });
  </script>
</head>
<body>
<div class="demo">
<h3 class="docs">Constrain movement along an axis:</h3>
  
<div id="draggable" class="draggable ui-widget-content">
  <p>I can be dragged only vertically</p>
</div>
<div id="draggable2" class="draggable ui-widget-content">
  <p>I can be dragged only horizontally</p>
</div>
<h3 class="docs">Or to within another DOM element:</h3>
<div id="containment-wrapper">
<div id="draggable3" class="draggable ui-widget-content">
  <p>I"m contained within the box</p>
</div>
<div id="draggable4" class="draggable ui-widget-content">
  <p>I"m contained within the box"s parent</p>
</div>
<div class="draggable ui-widget-content">
  <p id="draggable5" class="ui-widget-header">I"m contained within my parent</p>
</div>
</div>
</div><!-- End demo -->
<div class="demo-description">
<p>
Constrain the movement of each draggable by defining the boundaries of the draggable area. Set the <code>axis</code> option to limit the draggable"s path to the x- or y-axis, or use the <code>containment</code> option to specify a parent DOM element or a jQuery selector, like "document."
</p>
</div><!-- End demo-description -->
</body>
</html>

jQuery UI Draggable - Cursor style

  
<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Draggable - Cursor style</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.draggable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
  #draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
  </style>
  <script type="text/javascript">
  $(function() {
    $("#draggable").draggable({ cursorAt: { cursor: "move", top: 56, left: 56 } });
    $("#draggable2").draggable({ cursorAt: { cursor: "crosshair", top: -5, left: -5 } });
    $("#draggable3").draggable({ cursorAt: { bottom: 0 } });
  });
  </script>
</head>
<body>
<div class="demo">
  
<div id="draggable" class="ui-widget-content">
  <p>I will always stick to the center (relative to the mouse)</p>
</div>
<div id="draggable2" class="ui-widget-content">
  <p>My cursor is at left -5 and top -5</p>
</div>
<div id="draggable3" class="ui-widget-content">
  <p>My cursor position is only controlled for the "bottom" value</p>
</div>
</div><!-- End demo -->
<div class="demo-description">
<p>
Position the cursor while dragging the object. By default the cursor appears in the center of the dragged object; use the <code>cursorAt</code> option to specify another location relative to the draggable (specify a pixel value from the top, right, bottom, and/or left).  Customize the cursor"s appearance by supplying the <code>cursor</code> option with a valid CSS cursor value: default, move, pointer, crosshair, etc.
</p>
</div><!-- End demo-description -->
</body>
</html>

jQuery UI Draggable - Default functionality

  
<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Draggable - Default functionality</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.draggable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
  #draggable { width: 150px; height: 150px; padding: 0.5em; }
  </style>
  <script type="text/javascript">
  $(function() {
    $("#draggable").draggable();
  });
  </script>
</head>
<body>
<div class="demo">
<div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>
</div><!-- End demo -->
<div class="demo-description">
<p>
Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.
</p>
</div><!-- End demo-description -->
</body>
</html>

jQuery UI Draggable - Delay start

  

<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Draggable - Delay start</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.draggable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
  #draggable, #draggable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
  </style>
  <script type="text/javascript">
  $(function() {
    $("#draggable").draggable({ distance: 20 });
    $("#draggable2").draggable({ delay: 1000 });
    $(".ui-draggable").disableSelection();
  });
  </script>
</head>
<body>
<div class="demo">
  
<div id="draggable" class="ui-widget-content">
  <p>Only if you drag me by 20 pixels, the dragging will start</p>
</div>
<div id="draggable2" class="ui-widget-content">
  <p>Regardless of the distance, you have to drag and wait for 1000ms before dragging starts</p>
</div>
</div><!-- End demo -->
<div class="demo-description">
<p>
Delay the start of dragging for a number of milliseconds with the <code>delay</code> option; prevent dragging until the cursor is held down and dragged a specifed number of pixels with the <code>distance</code> option. 
</p>
</div><!-- End demo-description -->
</body>
</html>

jQuery UI Draggable - Events

  
<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Draggable - Events</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.draggable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
    #draggable { width: 16em; padding: 0 1em; }
    #draggable ul li { margin: 1em 0; padding: 0.5em 0; } * html #draggable ul li { height: 1%; }
    #draggable ul li span.ui-icon { float: left; }
    #draggable ul li span.count { font-weight: bold; }
  </style>
  <script type="text/javascript">
    $(function() {
      var $start_counter = $("#event-start"), $drag_counter = $("#event-drag"), $stop_counter = $("#event-stop");
      var counts = [0,0,0];
      $("#draggable").draggable({
        start: function() {
          counts[0]++;
          updateCounterStatus($start_counter,counts[0]);
        },
        drag: function() {
          counts[1]++;
          updateCounterStatus($drag_counter,counts[1]);
        },
        stop: function() {
          counts[2]++;
          updateCounterStatus($stop_counter,counts[2]);
        }
      });
    });
    function updateCounterStatus($event_counter,new_count) {
      // first update the status visually...
      if (!$event_counter.hasClass("ui-state-hover")) {
        $event_counter.addClass("ui-state-hover")
          .siblings().removeClass("ui-state-hover");
      }
      // ...then update the numbers
      $("span.count",$event_counter).text(new_count);
    }
  </script>
</head>
<body>
<div class="demo">
<div id="draggable" class="ui-widget ui-widget-content">
  <p>Drag me to trigger the chain of events.</p>
  <ul class="ui-helper-reset">
    <li id="event-start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span>"start" invoked <span class="count">0</span>x</li>
    <li id="event-drag" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-4"></span>"drag" invoked <span class="count">0</span>x</li>
    <li id="event-stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop"></span>"stop" invoked <span class="count">0</span>x</li>
  </ul>
</div>
</div><!-- End demo -->
<div class="demo-description">
<p>
Layer functionality onto the draggable using the <code>start</code>, <code>drag</code>, and <code>stop</code> events.  Start is fired at the start of the drag; drag during the drag; and stop when dragging stops.
</p>
</div><!-- End demo-description -->
</body>
</html>

jQuery UI Draggable - Handles

  
<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Draggable - Handles</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.draggable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
  #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
  #draggable p { cursor: move; }
  </style>
  <script type="text/javascript">
  $(function() {
    $("#draggable").draggable({ handle: "p" });
    $("#draggable2").draggable({ cancel: "p.ui-widget-header" });
    $("div, p").disableSelection();
  });
  </script>
</head>
<body>
<div class="demo">
  
<div id="draggable" class="ui-widget-content">
  <p class="ui-widget-header">I can be dragged only by this handle</p>
</div>
<div id="draggable2" class="ui-widget-content">
  <p>You can drag me around&hellip;</p>
  <p class="ui-widget-header">&hellip;but you can"t drag me by this handle.</p>
</div>
<!-- ADD CANCEL DEMO -->
</div><!-- End demo -->
<div class="demo-description">
<p>Allow dragging only when the cursor is over a specific part of the draggable.  Use the <code>handle</code> option to specify the jQuery selector of an element (or group of elements) used to drag the object.</p>
<p>Or prevent dragging when the cursor is over a specific element (or group of elements) within the draggable.  Use the <code>cancel</code> option to specify a jQuery selector over which to "cancel" draggable functionality.</p>
</div><!-- End demo-description -->
</body>
</html>

jQuery UI Draggable - Revert position

  
<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Draggable - Revert position</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.draggable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
  #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
  </style>
  <script type="text/javascript">
  $(function() {
    $("#draggable").draggable({ revert: true });
    $("#draggable2").draggable({ revert: true, helper: "clone" });
  });
  </script>
</head>
<body>
<div class="demo">
  
<div id="draggable" class="ui-widget-content">
  <p>Revert the original</p>
</div>
<div id="draggable2" class="ui-widget-content">
  <p>Revert the helper</p>
</div>
</div><!-- End demo -->
<div class="demo-description">
<p>
Return the draggable (or it"s helper) to its original location when dragging stops with the boolean <code>revert</code> option.
</p>
</div><!-- End demo-description -->
</body>
</html>

jQuery UI Draggable - Snap to element or grid

  
<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Draggable - Snap to element or grid</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.draggable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
  .draggable { width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; }
  .ui-widget-header p, .ui-widget-content p { margin: 0; }
  #snaptarget { height: 140px; }
  </style>
  <script type="text/javascript">
  $(function() {
    $("#draggable").draggable({ snap: true });
    $("#draggable2").draggable({ snap: ".ui-widget-header" });
    $("#draggable3").draggable({ snap: ".ui-widget-header", snapMode: "outer" });
    $("#draggable4").draggable({ grid: [20,20] });
    $("#draggable5").draggable({ grid: [80, 80] });
  });
  </script>
</head>
<body>
<div class="demo">
  
<div id="snaptarget" class="ui-widget-header">
  <p>I"m a snap target</p>
</div>
<br clear="both" />
<div id="draggable" class="draggable ui-widget-content">
  <p>Default (snap: true), snaps to all other draggable elements</p>
</div>
<div id="draggable2" class="draggable ui-widget-content">
  <p>I only snap to the big box</p>
</div>
<div id="draggable3" class="draggable ui-widget-content">
  <p>I only snap to the outer edges of the big box</p>
</div>
<div id="draggable4" class="draggable ui-widget-content">
  <p>I snap to a 20 x 20 grid</p>
</div>
<div id="draggable5" class="draggable ui-widget-content">
  <p>I snap to a 80 x 80 grid</p>
</div>
</div><!-- End demo -->
<div class="demo-description">
<p>Snap the draggable to the inner or outer boundaries of a DOM element.  Use the <code>snap</code>, <code>snapMode</code> (inner, outer, both), and <code>snapTolerance</code> (distance in pixels the draggable must be from the element when snapping is invoked) options. </p>
<p>Or snap the draggable to a grid.  Set the dimensions of grid cells (height and width in pixels) with the <code>grid</code> option.</p>
</div><!-- End demo-description -->

</body>
</html>

jQuery UI Draggable + Sortable

  
<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Draggable + Sortable</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.draggable.js"></script>
  <script type="text/javascript" src="js/ui/ui.sortable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
  .demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
  .demo li { margin: 5px; padding: 5px; width: 150px; }
  </style>
  <script type="text/javascript">
  $(function() {
    $("#sortable").sortable({
      revert: true
    });
    $("#draggable").draggable({
      connectToSortable: "#sortable",
      helper: "clone",
      revert: "invalid"
    })
    $("ul, li").disableSelection();
  });
  </script>
</head>
<body>
<div class="demo">
  
<ul>
  <li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>
</div><!-- End demo -->
<div class="demo-description">
<p>
Draggables are built to interact seamlessly with <a href="#">sortables</a>.
</p>
</div><!-- End demo-description -->
</body>
</html>

jQuery UI Draggable - Visual feedback

  
<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Draggable - Visual feedback</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.draggable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
  #draggable, #draggable2, #draggable3, #set div { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
  #draggable, #draggable2, #draggable3 { margin-bottom:20px; }
  #set { clear:both; float:left; width: 368px; height: 120px; }
  p { clear:both; margin:0; padding:1em 0; }
  </style>
  <script type="text/javascript">
  $(function() {
    $("#draggable").draggable({ helper: "original" });
    $("#draggable2").draggable({ opacity: 0.7, helper: "clone" });
    $("#draggable3").draggable({
      cursor: "move",
      cursorAt: { top: -12, left: -20 },
      helper: function(event) {
        return $("<div class="ui-widget-header">I\"m a custom helper</div>");
      }
    });
    $("#set div").draggable({ stack: { group: "#set div", min: 1 } });
  });
  </script>
</head>
<body>
<div class="demo">
<h3 class="docs">With helpers:</h3>
<div id="draggable" class="ui-widget-content">
  <p>Original</p>
</div>
<div id="draggable2" class="ui-widget-content">
  <p>Semi-transparent clone</p>
</div>
<div id="draggable3" class="ui-widget-content">
  <p>Custom helper (in combination with cursorAt)</p>
</div>
<h3 class="docs">Stacked:</h3>
<div id="set">
  <div class="ui-widget-content">
    <p>We are draggables..</p>
  </div>
  <div class="ui-widget-content">
    <p>..whose z-indexes are controlled automatically..</p>
  </div>
  <div class="ui-widget-content">
    <p>..with the stack option.</p>
  </div>
</div>
</div><!-- End demo -->
<div class="demo-description">
<p>Provide feedback to users as they drag an object in the form of a helper. The <code>helper</code> option accepts the values "original" (the draggable object moves with the cursor), "clone" (a duplicate of the draggable moves with the cursor), or a function that returns a DOM element (that element is shown near the cursor during drag). Control the helper"s transparency with the <code>opacity</code> option.</p>
<p>To clarify which draggable is in play, bring the draggable in motion to front. Use the <code>zIndex</code> option to set a higher z-index for the helper, if in play, or use the <code>stack</code> option to ensure that the last item dragged will appear on top of others in the same group on drag stop.</p>
</div><!-- End demo-description -->
</body>
</html>

Only draggable inside parent

 

<html lang="en">
<head>
  <title></title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.draggable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <script type="text/javascript">
    $(function() {
    var dragOpts = {  
      containment: "parent"
    };
    
    
      $("#drag").draggable(dragOpts);
    });
  </script>
</head>
<body>
    <div id="drag">Move me</div>
</body>
</html>

revert: true (fly back)

 

<html lang="en">
<head>
  <title></title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.draggable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <script type="text/javascript">
    $(function() {
        //define config object
        var dragOpts = {
                   revert: true
        };
        $("#drag").draggable(dragOpts);
    });
  </script>
</head>
<body>
    <div id="drag">Move me</div>
</body>
</html>

Set cursor position for the draggable

 
<html lang="en">
<head>
  <title></title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.draggable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <script type="text/javascript">
    $(function() {
        //define config object
        var dragOpts = {
          cursor: "move",
          axis: "y",
          distance: "30",
          cursorAt: {
            top: 0,
            left: 0
          } 
        };
        $("#drag").draggable(dragOpts);
    });
  </script>
</head>
<body>
    <div id="drag">Move me</div>
</body>
</html>

Set the handles for all directions

 
<html lang="en">
<head>
  <title></title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.resizable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <script type="text/javascript">
    $(function() {
        var resizeOpts = {
          handles: "all"
        }
        $(".resize").resizable(resizeOpts);
    });
  </script>
</head>
<body>
    <div class="resize"">asdf
      
    </div>
</body>
</html>

Snap to another

 
<html lang="en">
<head>
  <title></title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.draggable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <script type="text/javascript">
    $(function() {
    var dragOpts = {  
        snap: "#snapper",
        snapMode: "inner",
        snapTolerance: 50
    };
    
    
      $("#drag").draggable(dragOpts);
    });
  </script>
</head>
<body>
    <div id="drag">Move me</div>
    <div id="snapper"></div>
</body>
</html>

start and stop events

 
<html lang="en">
<head>
  <title></title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.draggable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <script type="text/javascript">
    $(function() {
      var dragOpts = {  
        start: setShadow,
        stop: unsetShadow
      };
      
      function setShadow() {
        $("#drag").css({ background: "red", width:"120px", height:"121px" });
      }
      
      function unsetShadow() {
        $("#drag").css({ background: "yellow", width:"114px", height:"114px" });
      }
    
    
      $("#drag").draggable(dragOpts);
    });
  </script>
</head>
<body>
    <div id="drag">Move me</div>
</body>
</html>

JavaScript DHTML/jQuery/UI Draggable — различия между версиями

Версия 10:02, 26 мая 2010

Содержание

Add border to the draggable

Add dragging stopped event handler

Add knobHandles

Can only drag along with axis y

Change cursor for draggable tag

Disable, enable and destroy the draggable object

Drag along a grid

Drag delay

jQuery UI Draggable - Auto-scroll

jQuery UI Draggable - Constrain movement

jQuery UI Draggable - Cursor style

jQuery UI Draggable - Default functionality

jQuery UI Draggable - Delay start

jQuery UI Draggable - Events

jQuery UI Draggable - Handles

jQuery UI Draggable - Revert position

jQuery UI Draggable - Snap to element or grid

jQuery UI Draggable + Sortable

jQuery UI Draggable - Visual feedback

Only draggable inside parent

revert: true (fly back)

Set cursor position for the draggable

Set the handles for all directions

Snap to another

start and stop events

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты

Текущая версия на 07:23, 26 мая 2010 (просмотреть исходный код) Admin (обсуждение \| вклад) м (1 версия)	Версия 10:02, 26 мая 2010 (просмотреть исходный код) (обсуждение) Следующая правка →
(нет различий)