mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-10-05 01:44:18 +00:00
demos/draggable: removed old demo files
This commit is contained in:
Richard Worth
parent
02358dc5f2
commit
fbc962faf6
@ -1,43 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Axis Demo</title>
|
||||
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.3.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<style type="text/css">
|
||||
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
|
||||
#draggable { cursor: n-resize; }
|
||||
#draggable2 { cursor: e-resize; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#draggable").draggable({ axis: 'y' });
|
||||
$("#draggable2").draggable({ axis: 'x' });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo">
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>I can be dragged only vertically</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable2" class="ui-widget-content">
|
||||
<p>I can be dragged only horizontally</p>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
<div class="demo-description">
|
||||
|
||||
<p>
|
||||
<!-- Add description here -->
|
||||
</p>
|
||||
|
||||
</div><!-- End demo-description -->
|
||||
</body>
|
||||
</html>
|
||||
@ -1,40 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Cancel Demo</title>
|
||||
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.3.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<style type="text/css">
|
||||
#draggable { width: 150px; height: 150px; padding: 0.5em; cursor: move; }
|
||||
#draggable p.ui-widget-header { cursor: default; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#draggable").draggable({ cancel: "p.ui-widget-header" });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>You can drag me around…</p>
|
||||
<p class="ui-widget-header">…but you can't drag me by this handle.</p>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
<div class="demo-description">
|
||||
|
||||
<p>
|
||||
<!-- Add description here -->
|
||||
</p>
|
||||
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,16 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Containment Demo</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<style type="text/css" media="screen">
|
||||
body,html {
|
||||
padding:0;margin:0;width:100%;height:100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<iframe frameborder='0' style='width: 100%; height: 99%;' src='containment_iframe.html'></iframe>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,49 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Containment Demo</title>
|
||||
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.3.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<style type="text/css">
|
||||
div.demo { padding:0; }
|
||||
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin:0 10px 0 0; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#draggable").draggable({ containment: 'window', scroll: false });
|
||||
$("#draggable2").draggable({ containment: 'document' });
|
||||
$("#draggable3").draggable({ containment: 'parent' });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo">
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>I'm contained within the window</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable2" class="ui-widget-content">
|
||||
<p>I'm contained within the document</p>
|
||||
</div>
|
||||
|
||||
<div class="ui-widget-content">
|
||||
<p id="draggable3" class='ui-widget-header'>I'm contained within my parent</p>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
<div class="demo-description">
|
||||
|
||||
<p>
|
||||
<!-- Add description here -->
|
||||
</p>
|
||||
|
||||
</div><!-- End demo-description -->
|
||||
<div style='width: 1px; height: 500px;'></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,46 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - cursorAt Demo</title>
|
||||
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.3.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<style type="text/css">
|
||||
#draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#draggable").draggable({ cursorAt: { top: 56, left: 56 } });
|
||||
$("#draggable2").draggable({ cursorAt: { 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>
|
||||
<!-- Add description here -->
|
||||
</p>
|
||||
|
||||
</div><!-- End demo-description -->
|
||||
</body>
|
||||
</html>
|
||||
@ -1,41 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Delay / Distance Demo</title>
|
||||
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.3.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<style type="text/css">
|
||||
#draggable, #draggable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 5px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#draggable").draggable({ distance: 20 });
|
||||
$("#draggable2").draggable({ delay: 1000 });
|
||||
});
|
||||
</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>
|
||||
<!-- Add description here -->
|
||||
</p>
|
||||
|
||||
</div><!-- End demo-description -->
|
||||
</body>
|
||||
</html>
|
||||
@ -1,41 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Grid Demo</title>
|
||||
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.3.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<style type="text/css">
|
||||
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#draggable").draggable({ grid: [20,20] });
|
||||
$("#draggable2").draggable({ grid: [1,50] });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo">
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>I can be dragged in a 20x20 grid system</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable2" class="ui-widget-content">
|
||||
<p>I only follow a vertical 50 pixel grid</p>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
<div class="demo-description">
|
||||
|
||||
<p>
|
||||
<!-- Add description here -->
|
||||
</p>
|
||||
|
||||
</div><!-- End demo-description -->
|
||||
</body>
|
||||
</html>
|
||||
@ -1,52 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Helper Demo</title>
|
||||
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.3.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<style type="text/css">
|
||||
#draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#draggable").draggable({ helper: 'original' });
|
||||
$("#draggable2").draggable({ 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>');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo">
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Original</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable2" class="ui-widget-content">
|
||||
<p>Clone</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable3" class="ui-widget-content">
|
||||
<p>Custom helper (in combination with cursorAt)</p>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
<div class="demo-description">
|
||||
|
||||
<p>
|
||||
<!-- Add description here -->
|
||||
</p>
|
||||
|
||||
</div><!-- End demo-description -->
|
||||
</body>
|
||||
</html>
|
||||
@ -1,41 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Opacity Demo</title>
|
||||
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.3.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<style type="text/css">
|
||||
#draggable1, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#draggable1").draggable({ opacity: 0.5 });
|
||||
$("#draggable2").draggable({ opacity: 0.5, helper: 'clone' });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo">
|
||||
|
||||
<div id="draggable1" class="ui-widget-content">
|
||||
<p>Opacity set to 0.5</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable2" class="ui-widget-content">
|
||||
<p>Opacity set to 0.5, using 'clone' as helper</p>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
<div class="demo-description">
|
||||
|
||||
<p>
|
||||
<!-- Add description here -->
|
||||
</p>
|
||||
|
||||
</div><!-- End demo-description -->
|
||||
</body>
|
||||
</html>
|
||||
@ -1,68 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Snap Demo</title>
|
||||
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.3.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<style type="text/css">
|
||||
#draggable, #draggable2, #draggable3, #draggable4, #draggable5 { width: 100px; height: 80px; padding: 5px; float: left; margin: 5px; 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({ snap: '.ui-widget-header', snapMode: 'inner' });
|
||||
$("#draggable5").draggable({ snap: '.ui-widget-header', snapTolerance: 50 });
|
||||
});
|
||||
</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="ui-widget-content">
|
||||
<p>Default (snap: true), snaps to all other draggable elements</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable2" class="ui-widget-content">
|
||||
<p>I only snap to the big box</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable3" class="ui-widget-content">
|
||||
<p>I only snap to the outer edges of the bix box</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable4" class="ui-widget-content">
|
||||
<p>I only snap to the inner edges of the big box</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable5" class="ui-widget-content">
|
||||
<p>I also snap to the big box but I'm very sticky because I have a high tolerance</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
<div class="demo-description">
|
||||
|
||||
<p>
|
||||
<!-- Add description here -->
|
||||
</p>
|
||||
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,52 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Z-Index / Stack Demo</title>
|
||||
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.3.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<style type="text/css">
|
||||
#draggable, #set, #set div { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
|
||||
#set { width: 368px; height: 120px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#draggable").draggable({ zIndex: 1000 });
|
||||
$("#set div").draggable({ stack: { group: '#set div', min: 1 } });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo">
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>I always have a higher z-index than my siblings during drag</p>
|
||||
</div>
|
||||
|
||||
<div id="set" class="ui-widget-content">
|
||||
<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>
|
||||
<!-- Add description here -->
|
||||
</p>
|
||||
|
||||
</div><!-- End demo-description -->
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user