Build jQuery UI Draggable - Visual feedback in JavaScript

Description

The following code shows how to build jQuery UI Draggable - Visual feedback.

Example


<!-- Revised from demo code on http://jqueryui.com/ -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Visual feedback</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<!--  w w  w  .  j  ava2 s. c o m-->
<style>
#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>
$(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: "#set div" });
});
</script>
</head>
<body>

<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 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>
</body>
</html>

Click to view the demo

The code above generates the following result.

Build jQuery UI Draggable - Visual feedback in JavaScript

Home »
  Javascript Tutorial »
    jQuery UI »
      Draggable

Build jQuery UI Draggable - Visual feedback...

Build jQuery UI Position - Default function...
Build jQuery UI Position - Image Cycler in ...
Change cursor for draggable tag in JavaScri...
Handle drag and drop events: activate, deac...
Handle drag start and stop events in JavaSc...
Handle droppable accepted event in JavaScri...
Set Drag delay distance in JavaScript
Set cursor position for the draggable in Ja...
Set to Drag along a grid in JavaScript
Set to fly back in JavaScript
Set to only draggable along with axis y in ...
Set to only draggable inside parent in Java...
Snap to another for draggable in JavaScript