JavaScript Tutorial/jQuery/UI Draggable

Содержание

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

30. Add border to the draggable

   <source lang="javascript">

 <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 $("

").css({

       border: "4px solid #cccccc",
      opacity: "0.5",
      height: "110px",
      width: "120px"
     });
   }
   
     $("#drag").draggable(dragOpts);
   });
 </script>

</head> <body>

Move me

</body> </html></source>

30. Add dragging stopped event handler

   <source lang="javascript">

 <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>

asdf

</body> </html></source>

30. Add knobHandles

   <source lang="javascript">

 <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>

asdf

</body> </html></source>

30. Can only drag along with axis y

   <source lang="javascript">

 <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>

Move me

</body> </html></source>

30. Change cursor for draggable tag

   <source lang="javascript">

 <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>

Move me

</body> </html></source>

30. Disable, enable and destroy the draggable object

   <source lang="javascript">

 <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>

asdf

</body> </html></source>

30. Drag along a grid

   <source lang="javascript">

 <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>

Move me

</body> </html></source>

30. Drag delay

   <source lang="javascript">

 <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>

Move me

</body> </html></source>

30. jQuery UI Draggable - Auto-scroll

   <source lang="javascript">

<!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>

Scroll set to true, default settings

scrollSensitivity set to 100

scrollSpeed set to 100

Automatically scroll the document when the draggable is moved beyond the viewport. Set the scroll option to true to enable auto-scrolling, and fine-tune when scrolling is triggered and its speed with the scrollSensitivity and scrollSpeed options.

</body> </html></source>

30. jQuery UI Draggable - Constrain movement

   <source lang="javascript">

<!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>

Constrain movement along an axis:

I can be dragged only vertically

I can be dragged only horizontally

Or to within another DOM element:

I"m contained within the box

I"m contained within the box"s parent

I"m contained within my parent

Constrain the movement of each draggable by defining the boundaries of the draggable area. Set the axis option to limit the draggable"s path to the x- or y-axis, or use the containment option to specify a parent DOM element or a jQuery selector, like "document."

</body> </html></source>

30. jQuery UI Draggable - Cursor style

   <source lang="javascript">

<!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>

I will always stick to the center (relative to the mouse)

My cursor is at left -5 and top -5

My cursor position is only controlled for the "bottom" value

Position the cursor while dragging the object. By default the cursor appears in the center of the dragged object; use the cursorAt 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 cursor option with a valid CSS cursor value: default, move, pointer, crosshair, etc.

</body> </html></source>

30. jQuery UI Draggable - Default functionality

   <source lang="javascript">

<!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>

Drag me around

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.

</body> </html></source>

30. jQuery UI Draggable - Delay start

   <source lang="javascript">

<!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>

Only if you drag me by 20 pixels, the dragging will start

Regardless of the distance, you have to drag and wait for 1000ms before dragging starts

Delay the start of dragging for a number of milliseconds with the delay option; prevent dragging until the cursor is held down and dragged a specifed number of pixels with the distance option.

</body> </html></source>

30. jQuery UI Draggable - Events

   <source lang="javascript">

<!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>

Drag me to trigger the chain of events.

"start" invoked 0x
"drag" invoked 0x
"stop" invoked 0x

Layer functionality onto the draggable using the start, drag, and stop events. Start is fired at the start of the drag; drag during the drag; and stop when dragging stops.

</body> </html></source>

30. jQuery UI Draggable - Handles

   <source lang="javascript">

<!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>

I can be dragged only by this handle

You can drag me around…

…but you can"t drag me by this handle.

Allow dragging only when the cursor is over a specific part of the draggable. Use the handle option to specify the jQuery selector of an element (or group of elements) used to drag the object.

Or prevent dragging when the cursor is over a specific element (or group of elements) within the draggable. Use the cancel option to specify a jQuery selector over which to "cancel" draggable functionality.

</body> </html></source>

30. jQuery UI Draggable - Revert position

   <source lang="javascript">

<!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>

Revert the original

Revert the helper

Return the draggable (or it"s helper) to its original location when dragging stops with the boolean revert option.

</body> </html></source>

30. jQuery UI Draggable - Snap to element or grid

   <source lang="javascript">

<!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>

I"m a snap target

Default (snap: true), snaps to all other draggable elements

I only snap to the big box

I only snap to the outer edges of the big box

I snap to a 20 x 20 grid

I snap to a 80 x 80 grid

Snap the draggable to the inner or outer boundaries of a DOM element. Use the snap, snapMode (inner, outer, both), and snapTolerance (distance in pixels the draggable must be from the element when snapping is invoked) options.

Or snap the draggable to a grid. Set the dimensions of grid cells (height and width in pixels) with the grid option.

</body> </html></source>

30. jQuery UI Draggable + Sortable

   <source lang="javascript">

<!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>

Drag me down

Item 1
Item 2
Item 3
Item 4
Item 5

Draggables are built to interact seamlessly with <a href="#">sortables</a>.

</body> </html></source>

30. jQuery UI Draggable - Visual feedback

   <source lang="javascript">

<!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 $("

I\"m a custom helper

");

     }
   });
   $("#set div").draggable({ stack: { group: "#set div", min: 1 } });
 });
 </script>

</head> <body>

With helpers:

Original

Semi-transparent clone

Custom helper (in combination with cursorAt)

Stacked:

We are draggables..

..whose z-indexes are controlled automatically..

..with the stack option.

Provide feedback to users as they drag an object in the form of a helper. The helper 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 opacity option.

To clarify which draggable is in play, bring the draggable in motion to front. Use the zIndex option to set a higher z-index for the helper, if in play, or use the stack option to ensure that the last item dragged will appear on top of others in the same group on drag stop.

</body> </html></source>

30. Only draggable inside parent

   <source lang="javascript">

 <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>

Move me

</body> </html></source>

30. revert: true (fly back)

   <source lang="javascript">

 <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>

Move me

</body> </html></source>

30. Set cursor position for the draggable

   <source lang="javascript">

 <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>

Move me

</body> </html></source>

30. Set the handles for all directions

   <source lang="javascript">

 <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>

asdf

</body> </html></source>

30. Snap to another

   <source lang="javascript">

 <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>

Move me

</body> </html></source>

30. start and stop events

   <source lang="javascript">

 <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>

Move me

</body>

</html></source>

JavaScript Tutorial/jQuery/UI Draggable

Содержание

30. Add border to the draggable

30. Add dragging stopped event handler

30. Add knobHandles

30. Can only drag along with axis y

30. Change cursor for draggable tag

30. Disable, enable and destroy the draggable object

30. Drag along a grid

30. Drag delay

30. jQuery UI Draggable - Auto-scroll

30. jQuery UI Draggable - Constrain movement

Constrain movement along an axis:

Or to within another DOM element:

30. jQuery UI Draggable - Cursor style

30. jQuery UI Draggable - Default functionality

30. jQuery UI Draggable - Delay start

30. jQuery UI Draggable - Events

30. jQuery UI Draggable - Handles

30. jQuery UI Draggable - Revert position

30. jQuery UI Draggable - Snap to element or grid

30. jQuery UI Draggable + Sortable

30. jQuery UI Draggable - Visual feedback

With helpers:

Stacked:

30. Only draggable inside parent

30. revert: true (fly back)

30. Set cursor position for the draggable

30. Set the handles for all directions

30. Snap to another

30. start and stop events

Навигация

Поиск