mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
set svn:eol-style to native
This commit is contained in:
Richard Worth
parent
d87a60ec57
commit
9fc23e1108
@ -1,33 +1,33 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Constrained to one axis</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-content { 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 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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Constrained to one axis</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-content { 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 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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,38 +1,38 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Containment</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#draggable").draggable({ containment: 'window' });
|
||||
$("#draggable2").draggable({ containment: 'document' });
|
||||
$("#draggable3").draggable({ containment: 'parent' });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<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 style='width: 1px; height: 500px;'></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Containment</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#draggable").draggable({ containment: 'window' });
|
||||
$("#draggable2").draggable({ containment: 'document' });
|
||||
$("#draggable3").draggable({ containment: 'parent' });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<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 style='width: 1px; height: 500px;'></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,36 +1,36 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Cursor at a certain position</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-content { 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 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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Cursor at a certain position</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-content { 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 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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,26 +1,26 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Default Demo</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<style type="text/css">
|
||||
#draggable { width: 150px; height: 150px; padding: 0.5em; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#draggable").draggable();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Drag me around</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Default Demo</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<style type="text/css">
|
||||
#draggable { width: 150px; height: 150px; padding: 0.5em; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#draggable").draggable();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Drag me around</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,31 +1,31 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Distance and Delay</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-content { width: 100px; height: 100px; 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 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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Distance and Delay</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-content { width: 100px; height: 100px; 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 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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,31 +1,31 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Grid</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-content { 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 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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Grid</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-content { 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 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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,27 +1,27 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Handle</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
|
||||
.ui-widget-header { cursor: move; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#draggable").draggable({ handle: 'p' });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p class="ui-widget-header">I can be dragged only by this handle</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Handle</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
|
||||
.ui-widget-header { cursor: move; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#draggable").draggable({ handle: 'p' });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p class="ui-widget-header">I can be dragged only by this handle</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,41 +1,41 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Helper</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-content { 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({
|
||||
cursorAt: { top: -5, left: -5 },
|
||||
helper: function(event) {
|
||||
return $('<div class="ui-widget-header">I\'m a custom helper</div>');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Helper</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-content { 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({
|
||||
cursorAt: { top: -5, left: -5 },
|
||||
helper: function(event) {
|
||||
return $('<div class="ui-widget-header">I\'m a custom helper</div>');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,31 +1,31 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Opacity</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#draggable").draggable({ opacity: 0.5 });
|
||||
$("#draggable2").draggable({ opacity: 0.5, helper: 'clone' });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" 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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Opacity</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#draggable").draggable({ opacity: 0.5 });
|
||||
$("#draggable2").draggable({ opacity: 0.5, helper: 'clone' });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" 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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,31 +1,31 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Revert</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#draggable").draggable({ revert: true });
|
||||
$("#draggable2").draggable({ revert: true, helper: 'clone' });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Revert</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#draggable").draggable({ revert: true });
|
||||
$("#draggable2").draggable({ revert: true, helper: 'clone' });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,38 +1,38 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Scroll</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
|
||||
</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 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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Scroll</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
|
||||
</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 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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,57 +1,57 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Snap</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-content { width: 75px; height: 80px; padding: 0.5em; float: left; margin: 5px; }
|
||||
.ui-widget-header { height: 130px; }
|
||||
</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="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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Snap</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-content { width: 75px; height: 80px; padding: 0.5em; float: left; margin: 5px; }
|
||||
.ui-widget-header { height: 130px; }
|
||||
</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="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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,42 +1,42 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Z-Index / Stack</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-content { 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 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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Draggable - Z-Index / Stack</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-content { 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 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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,49 +1,49 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Droppable - accept</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
|
||||
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
|
||||
$("#draggable,#draggable-nonvalid").draggable();
|
||||
|
||||
$("#droppable").droppable({
|
||||
accept: '#draggable',
|
||||
activeClass: 'ui-state-hover',
|
||||
hoverClass: 'ui-state-active',
|
||||
drop: function(event, ui) {
|
||||
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable-nonvalid" class="ui-widget-content">
|
||||
<p>I'm draggable but can't be dropped</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Drag me to my target</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="droppable" class="ui-widget-header">
|
||||
<p>accept: '#draggable'</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Droppable - accept</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
|
||||
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
|
||||
$("#draggable,#draggable-nonvalid").draggable();
|
||||
|
||||
$("#droppable").droppable({
|
||||
accept: '#draggable',
|
||||
activeClass: 'ui-state-hover',
|
||||
hoverClass: 'ui-state-active',
|
||||
drop: function(event, ui) {
|
||||
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable-nonvalid" class="ui-widget-content">
|
||||
<p>I'm draggable but can't be dropped</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Drag me to my target</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="droppable" class="ui-widget-header">
|
||||
<p>accept: '#draggable'</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,40 +1,40 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Droppable - activeClass</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
|
||||
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#draggable").draggable();
|
||||
$("#droppable").droppable({
|
||||
activeClass: 'ui-state-hover',
|
||||
hoverClass: 'ui-state-active',
|
||||
drop: function(event, ui) {
|
||||
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Drag me to my target</p>
|
||||
</div>
|
||||
|
||||
<div id="droppable" class="ui-widget-header">
|
||||
<p>Drop here</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Droppable - activeClass</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
|
||||
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#draggable").draggable();
|
||||
$("#droppable").droppable({
|
||||
activeClass: 'ui-state-hover',
|
||||
hoverClass: 'ui-state-active',
|
||||
drop: function(event, ui) {
|
||||
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Drag me to my target</p>
|
||||
</div>
|
||||
|
||||
<div id="droppable" class="ui-widget-header">
|
||||
<p>Drop here</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,38 +1,38 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Droppable - Default Demo</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
|
||||
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#draggable").draggable();
|
||||
$("#droppable").droppable({
|
||||
drop: function(event, ui) {
|
||||
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Drag me to my target</p>
|
||||
</div>
|
||||
|
||||
<div id="droppable" class="ui-widget-header">
|
||||
<p>Drop here</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Droppable - Default Demo</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
|
||||
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#draggable").draggable();
|
||||
$("#droppable").droppable({
|
||||
drop: function(event, ui) {
|
||||
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Drag me to my target</p>
|
||||
</div>
|
||||
|
||||
<div id="droppable" class="ui-widget-header">
|
||||
<p>Drop here</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,64 +1,64 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Droppable - greedy</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
|
||||
<style type="text/css">
|
||||
#droppable,#droppable2 { width: 200px; height: 160px; padding: 0.5em; float: left; margin: 10px; }
|
||||
#droppable-inner,#droppable2-inner { width: 140px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
|
||||
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
|
||||
$("#draggable").draggable();
|
||||
|
||||
$("#droppable, #droppable-inner").droppable({
|
||||
activeClass: 'ui-state-hover',
|
||||
hoverClass: 'ui-state-active',
|
||||
drop: function(event, ui) {
|
||||
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
|
||||
}
|
||||
});
|
||||
|
||||
$("#droppable2, #droppable2-inner").droppable({
|
||||
greedy: true,
|
||||
activeClass: 'ui-state-hover',
|
||||
hoverClass: 'ui-state-active',
|
||||
drop: function(event, ui) {
|
||||
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Drag me to my target</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="droppable" class="ui-widget-header">
|
||||
<p>Outer droppable (greedy deactivated)</p>
|
||||
<div id="droppable-inner" class="ui-widget-header">
|
||||
<p>Inner droppable (greedy deactivated)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="droppable2" class="ui-widget-header">
|
||||
<p>Outer droppable (greedy deactivated)</p>
|
||||
<div id="droppable2-inner" class="ui-widget-header">
|
||||
<p>Inner droppable (greedy deactivated)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Droppable - greedy</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
|
||||
<style type="text/css">
|
||||
#droppable,#droppable2 { width: 200px; height: 160px; padding: 0.5em; float: left; margin: 10px; }
|
||||
#droppable-inner,#droppable2-inner { width: 140px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
|
||||
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
|
||||
$("#draggable").draggable();
|
||||
|
||||
$("#droppable, #droppable-inner").droppable({
|
||||
activeClass: 'ui-state-hover',
|
||||
hoverClass: 'ui-state-active',
|
||||
drop: function(event, ui) {
|
||||
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
|
||||
}
|
||||
});
|
||||
|
||||
$("#droppable2, #droppable2-inner").droppable({
|
||||
greedy: true,
|
||||
activeClass: 'ui-state-hover',
|
||||
hoverClass: 'ui-state-active',
|
||||
drop: function(event, ui) {
|
||||
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Drag me to my target</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="droppable" class="ui-widget-header">
|
||||
<p>Outer droppable (greedy deactivated)</p>
|
||||
<div id="droppable-inner" class="ui-widget-header">
|
||||
<p>Inner droppable (greedy deactivated)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="droppable2" class="ui-widget-header">
|
||||
<p>Outer droppable (greedy deactivated)</p>
|
||||
<div id="droppable2-inner" class="ui-widget-header">
|
||||
<p>Inner droppable (greedy deactivated)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,39 +1,39 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Droppable - hoverClass</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
|
||||
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#draggable").draggable();
|
||||
$("#droppable").droppable({
|
||||
hoverClass: 'ui-state-active',
|
||||
drop: function(event, ui) {
|
||||
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Drag me to my target</p>
|
||||
</div>
|
||||
|
||||
<div id="droppable" class="ui-widget-header">
|
||||
<p>Drop here</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Droppable - hoverClass</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
|
||||
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#draggable").draggable();
|
||||
$("#droppable").droppable({
|
||||
hoverClass: 'ui-state-active',
|
||||
drop: function(event, ui) {
|
||||
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Drag me to my target</p>
|
||||
</div>
|
||||
|
||||
<div id="droppable" class="ui-widget-header">
|
||||
<p>Drop here</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,83 +1,83 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Droppable - tolerance</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
|
||||
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
|
||||
$("#draggable").draggable();
|
||||
|
||||
$("#droppable").droppable({
|
||||
activeClass: 'ui-state-hover',
|
||||
hoverClass: 'ui-state-active',
|
||||
drop: function(event, ui) {
|
||||
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
|
||||
}
|
||||
});
|
||||
|
||||
$("#droppable-fit").droppable({
|
||||
activeClass: 'ui-state-hover',
|
||||
hoverClass: 'ui-state-active',
|
||||
tolerance: 'fit',
|
||||
drop: function(event, ui) {
|
||||
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
|
||||
}
|
||||
});
|
||||
|
||||
$("#droppable-pointer").droppable({
|
||||
activeClass: 'ui-state-hover',
|
||||
hoverClass: 'ui-state-active',
|
||||
tolerance: 'pointer',
|
||||
drop: function(event, ui) {
|
||||
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
|
||||
}
|
||||
});
|
||||
|
||||
$("#droppable-touch").droppable({
|
||||
activeClass: 'ui-state-hover',
|
||||
hoverClass: 'ui-state-active',
|
||||
tolerance: 'touch',
|
||||
drop: function(event, ui) {
|
||||
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Drag me to my target</p>
|
||||
</div>
|
||||
|
||||
<br clear="both" />
|
||||
|
||||
<div id="droppable" class="ui-widget-header">
|
||||
<p>Default tolerance</p>
|
||||
</div>
|
||||
|
||||
<div id="droppable-fit" class="ui-widget-header">
|
||||
<p>tolerance: 'fit'</p>
|
||||
</div>
|
||||
|
||||
<div id="droppable-pointer" class="ui-widget-header">
|
||||
<p>tolerance: 'pointer'</p>
|
||||
</div>
|
||||
|
||||
<div id="droppable-touch" class="ui-widget-header">
|
||||
<p>tolerance: 'touch'</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Droppable - tolerance</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
|
||||
<style type="text/css">
|
||||
.ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
|
||||
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
|
||||
$("#draggable").draggable();
|
||||
|
||||
$("#droppable").droppable({
|
||||
activeClass: 'ui-state-hover',
|
||||
hoverClass: 'ui-state-active',
|
||||
drop: function(event, ui) {
|
||||
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
|
||||
}
|
||||
});
|
||||
|
||||
$("#droppable-fit").droppable({
|
||||
activeClass: 'ui-state-hover',
|
||||
hoverClass: 'ui-state-active',
|
||||
tolerance: 'fit',
|
||||
drop: function(event, ui) {
|
||||
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
|
||||
}
|
||||
});
|
||||
|
||||
$("#droppable-pointer").droppable({
|
||||
activeClass: 'ui-state-hover',
|
||||
hoverClass: 'ui-state-active',
|
||||
tolerance: 'pointer',
|
||||
drop: function(event, ui) {
|
||||
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
|
||||
}
|
||||
});
|
||||
|
||||
$("#droppable-touch").droppable({
|
||||
activeClass: 'ui-state-hover',
|
||||
hoverClass: 'ui-state-active',
|
||||
tolerance: 'touch',
|
||||
drop: function(event, ui) {
|
||||
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Drag me to my target</p>
|
||||
</div>
|
||||
|
||||
<br clear="both" />
|
||||
|
||||
<div id="droppable" class="ui-widget-header">
|
||||
<p>Default tolerance</p>
|
||||
</div>
|
||||
|
||||
<div id="droppable-fit" class="ui-widget-header">
|
||||
<p>tolerance: 'fit'</p>
|
||||
</div>
|
||||
|
||||
<div id="droppable-pointer" class="ui-widget-header">
|
||||
<p>tolerance: 'pointer'</p>
|
||||
</div>
|
||||
|
||||
<div id="droppable-touch" class="ui-widget-header">
|
||||
<p>tolerance: 'touch'</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,41 +1,41 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Sortable - Connected lists</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
|
||||
<style type="text/css">
|
||||
ul { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
|
||||
li { margin: 3px; padding: 2px; width: 120px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("ul").sortable({
|
||||
connectWith: ['ul']
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<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>
|
||||
|
||||
<ul>
|
||||
<li class="ui-state-highlight">Item 1</li>
|
||||
<li class="ui-state-highlight">Item 2</li>
|
||||
<li class="ui-state-highlight">Item 3</li>
|
||||
<li class="ui-state-highlight">Item 4</li>
|
||||
<li class="ui-state-highlight">Item 5</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Sortable - Connected lists</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
|
||||
<style type="text/css">
|
||||
ul { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
|
||||
li { margin: 3px; padding: 2px; width: 120px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("ul").sortable({
|
||||
connectWith: ['ul']
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<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>
|
||||
|
||||
<ul>
|
||||
<li class="ui-state-highlight">Item 1</li>
|
||||
<li class="ui-state-highlight">Item 2</li>
|
||||
<li class="ui-state-highlight">Item 3</li>
|
||||
<li class="ui-state-highlight">Item 4</li>
|
||||
<li class="ui-state-highlight">Item 5</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,36 +1,36 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Sortable - Default Demo</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
|
||||
<style type="text/css">
|
||||
ul { list-style-type: none; margin: 0; padding: 0; }
|
||||
li { margin: 3px; padding: 2px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("ul").sortable();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<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>
|
||||
<li class="ui-state-default">Item 6</li>
|
||||
<li class="ui-state-default">Item 7</li>
|
||||
<li class="ui-state-default">Item 8</li>
|
||||
<li class="ui-state-default">Item 9</li>
|
||||
<li class="ui-state-default">Item 10</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Sortable - Default Demo</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
|
||||
<style type="text/css">
|
||||
ul { list-style-type: none; margin: 0; padding: 0; }
|
||||
li { margin: 3px; padding: 2px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("ul").sortable();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<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>
|
||||
<li class="ui-state-default">Item 6</li>
|
||||
<li class="ui-state-default">Item 7</li>
|
||||
<li class="ui-state-default">Item 8</li>
|
||||
<li class="ui-state-default">Item 9</li>
|
||||
<li class="ui-state-default">Item 10</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,51 +1,51 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Sortable - Delay / Distance</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
|
||||
<style type="text/css">
|
||||
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 20px; }
|
||||
li { margin: 3px; padding: 2px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
|
||||
$("ul:eq(0)").sortable({
|
||||
delay: 1000
|
||||
});
|
||||
|
||||
$("ul:eq(1)").sortable({
|
||||
distance: 50
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Delay of 1000ms</p>
|
||||
|
||||
<ul>
|
||||
<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>
|
||||
|
||||
<p>Distance of 50px</p>
|
||||
|
||||
<ul>
|
||||
<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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Sortable - Delay / Distance</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
|
||||
<style type="text/css">
|
||||
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 20px; }
|
||||
li { margin: 3px; padding: 2px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
|
||||
$("ul:eq(0)").sortable({
|
||||
delay: 1000
|
||||
});
|
||||
|
||||
$("ul:eq(1)").sortable({
|
||||
distance: 50
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Delay of 1000ms</p>
|
||||
|
||||
<ul>
|
||||
<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>
|
||||
|
||||
<p>Distance of 50px</p>
|
||||
|
||||
<ul>
|
||||
<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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,51 +1,51 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Sortable - Dropping on empty lists</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
|
||||
<style type="text/css">
|
||||
ul { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 133px;}
|
||||
li { margin: 3px; padding: 2px; width: 120px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("ul.droptrue").sortable({
|
||||
connectWith: ['ul']
|
||||
});
|
||||
|
||||
$("ul.dropfalse").sortable({
|
||||
connectWith: ['ul'],
|
||||
dropOnEmpty: false
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul class='droptrue'>
|
||||
<li class="ui-state-default">Can be dropped..</li>
|
||||
<li class="ui-state-default">..on an empty list</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>
|
||||
|
||||
<ul class='dropfalse'>
|
||||
<li class="ui-state-highlight">Cannot be dropped..</li>
|
||||
<li class="ui-state-highlight">..on an empty list</li>
|
||||
<li class="ui-state-highlight">Item 3</li>
|
||||
<li class="ui-state-highlight">Item 4</li>
|
||||
<li class="ui-state-highlight">Item 5</li>
|
||||
</ul>
|
||||
|
||||
<ul class='droptrue'>
|
||||
</ul>
|
||||
|
||||
<br clear="both" />
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Sortable - Dropping on empty lists</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
|
||||
<style type="text/css">
|
||||
ul { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 133px;}
|
||||
li { margin: 3px; padding: 2px; width: 120px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("ul.droptrue").sortable({
|
||||
connectWith: ['ul']
|
||||
});
|
||||
|
||||
$("ul.dropfalse").sortable({
|
||||
connectWith: ['ul'],
|
||||
dropOnEmpty: false
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul class='droptrue'>
|
||||
<li class="ui-state-default">Can be dropped..</li>
|
||||
<li class="ui-state-default">..on an empty list</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>
|
||||
|
||||
<ul class='dropfalse'>
|
||||
<li class="ui-state-highlight">Cannot be dropped..</li>
|
||||
<li class="ui-state-highlight">..on an empty list</li>
|
||||
<li class="ui-state-highlight">Item 3</li>
|
||||
<li class="ui-state-highlight">Item 4</li>
|
||||
<li class="ui-state-highlight">Item 5</li>
|
||||
</ul>
|
||||
|
||||
<ul class='droptrue'>
|
||||
</ul>
|
||||
|
||||
<br clear="both" />
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,38 +1,38 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Sortable - Floating</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
|
||||
<style type="text/css">
|
||||
ul { list-style-type: none; margin: 0; padding: 0; }
|
||||
li { margin: 3px; padding: 2px; float: left; width: 100px; height: 100px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("ul").sortable();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<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>
|
||||
<li class="ui-state-default">Item 6</li>
|
||||
<li class="ui-state-default">Item 7</li>
|
||||
<li class="ui-state-default">Item 8</li>
|
||||
<li class="ui-state-default">Item 9</li>
|
||||
<li class="ui-state-default">Item 10</li>
|
||||
<li class="ui-state-default">Item 11</li>
|
||||
<li class="ui-state-default">Item 12</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Sortable - Floating</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
|
||||
<style type="text/css">
|
||||
ul { list-style-type: none; margin: 0; padding: 0; }
|
||||
li { margin: 3px; padding: 2px; float: left; width: 100px; height: 100px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("ul").sortable();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<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>
|
||||
<li class="ui-state-default">Item 6</li>
|
||||
<li class="ui-state-default">Item 7</li>
|
||||
<li class="ui-state-default">Item 8</li>
|
||||
<li class="ui-state-default">Item 9</li>
|
||||
<li class="ui-state-default">Item 10</li>
|
||||
<li class="ui-state-default">Item 11</li>
|
||||
<li class="ui-state-default">Item 12</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,49 +1,49 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Sortable - Items</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
|
||||
<style type="text/css">
|
||||
ul { list-style-type: none; margin: 0; padding: 0; }
|
||||
li { margin: 3px; padding: 2px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("ul:eq(0)").sortable({
|
||||
items: 'li:not(.ui-state-disabled)'
|
||||
});
|
||||
|
||||
$("ul:eq(1)").sortable({
|
||||
cancel: '.ui-state-disabled'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Completely exclude items from the sorting logic using the 'items' option</p>
|
||||
|
||||
<ul>
|
||||
<li class="ui-state-default">Item 1</li>
|
||||
<li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
|
||||
<li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
|
||||
<li class="ui-state-default">Item 4</li>
|
||||
<li class="ui-state-default">Item 5</li>
|
||||
</ul>
|
||||
|
||||
<p>Keep the items as valid targets, but non-draggable, using the 'cancel' option</p>
|
||||
|
||||
<ul>
|
||||
<li class="ui-state-default">Item 1</li>
|
||||
<li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
|
||||
<li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
|
||||
<li class="ui-state-default">Item 4</li>
|
||||
<li class="ui-state-default">Item 5</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Sortable - Items</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
|
||||
<style type="text/css">
|
||||
ul { list-style-type: none; margin: 0; padding: 0; }
|
||||
li { margin: 3px; padding: 2px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("ul:eq(0)").sortable({
|
||||
items: 'li:not(.ui-state-disabled)'
|
||||
});
|
||||
|
||||
$("ul:eq(1)").sortable({
|
||||
cancel: '.ui-state-disabled'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Completely exclude items from the sorting logic using the 'items' option</p>
|
||||
|
||||
<ul>
|
||||
<li class="ui-state-default">Item 1</li>
|
||||
<li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
|
||||
<li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
|
||||
<li class="ui-state-default">Item 4</li>
|
||||
<li class="ui-state-default">Item 5</li>
|
||||
</ul>
|
||||
|
||||
<p>Keep the items as valid targets, but non-draggable, using the 'cancel' option</p>
|
||||
|
||||
<ul>
|
||||
<li class="ui-state-default">Item 1</li>
|
||||
<li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
|
||||
<li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
|
||||
<li class="ui-state-default">Item 4</li>
|
||||
<li class="ui-state-default">Item 5</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,38 +1,38 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Sortable - Placeholder</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
|
||||
<style type="text/css">
|
||||
ul { list-style-type: none; margin: 0; padding: 0; }
|
||||
li { margin: 3px; padding: 2px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("ul").sortable({
|
||||
placeholder: 'ui-state-highlight'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<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>
|
||||
<li class="ui-state-default">Item 6</li>
|
||||
<li class="ui-state-default">Item 7</li>
|
||||
<li class="ui-state-default">Item 8</li>
|
||||
<li class="ui-state-default">Item 9</li>
|
||||
<li class="ui-state-default">Item 10</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Sortable - Placeholder</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
|
||||
<style type="text/css">
|
||||
ul { list-style-type: none; margin: 0; padding: 0; }
|
||||
li { margin: 3px; padding: 2px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("ul").sortable({
|
||||
placeholder: 'ui-state-highlight'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<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>
|
||||
<li class="ui-state-default">Item 6</li>
|
||||
<li class="ui-state-default">Item 7</li>
|
||||
<li class="ui-state-default">Item 8</li>
|
||||
<li class="ui-state-default">Item 9</li>
|
||||
<li class="ui-state-default">Item 10</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user