mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
58 lines
1.6 KiB
HTML
58 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>jQuery UI Draggable - Revert position</title>
|
|
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
|
<script src="../../jquery-1.7.1.js"></script>
|
|
<script src="../../ui/jquery.ui.core.js"></script>
|
|
<script src="../../ui/jquery.ui.widget.js"></script>
|
|
<script src="../../ui/jquery.ui.interaction.js"></script>
|
|
<script src="../../ui/jquery.ui.draggable.js"></script>
|
|
<link rel="stylesheet" href="../demos.css">
|
|
<style>
|
|
.ui-draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
|
|
</style>
|
|
<script>
|
|
$(function() {
|
|
$( "#draggable" ).draggable({
|
|
stop: function( event, ui ) {
|
|
$( event.target ).animate( ui.originalPosition );
|
|
}
|
|
});
|
|
$( "#draggable2" ).draggable({
|
|
helper: true,
|
|
stop: function( event, ui ) {
|
|
ui.helper.animate( ui.originalPosition, function() {
|
|
ui.helper.remove();
|
|
});
|
|
// prevent the draggable plugin from removing the helper
|
|
event.preventDefault();
|
|
}
|
|
});
|
|
});
|
|
</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>The <code>stop</code> callback can be used to perform an action after the user finishing dragging the element. For example, if you want to return the draggable (or it's helper) to its original location when dragging stops, you can do so in the <code>stop</code> callback.</p>
|
|
</div><!-- End demo-description -->
|
|
|
|
</body>
|
|
</html>
|