Skip to content
Permalink
Browse files

Draggable: Update to demos to use AMD

Ref #10119
  • Loading branch information...
arschmitz committed Jun 30, 2015
1 parent f18ec88 commit 41b5b2d7a9def3298a205150d0a8428c86798dcd
@@ -4,11 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Draggable - Constrain movement</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/mouse.js"></script>
<script src="../../ui/draggable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
@@ -18,14 +13,13 @@
#containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; }
h3 { clear: left; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#draggable" ).draggable({ axis: "y" });
$( "#draggable2" ).draggable({ axis: "x" });
$( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
$( "#draggable5" ).draggable({ containment: "parent" });
});
</script>
</head>
<body>
@@ -4,21 +4,15 @@
<meta charset="utf-8">
<title>jQuery UI Draggable - Cursor style</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/mouse.js"></script>
<script src="../../ui/draggable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#draggable" ).draggable({ cursor: "move", cursorAt: { top: 56, left: 56 } });
$( "#draggable2" ).draggable({ cursor: "crosshair", cursorAt: { top: -5, left: -5 } });
$( "#draggable3" ).draggable({ cursorAt: { bottom: 0 } });
});
</script>
</head>
<body>
@@ -4,19 +4,13 @@
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/mouse.js"></script>
<script src="../../ui/draggable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
@@ -4,20 +4,15 @@
<meta charset="utf-8">
<title>jQuery UI Draggable - Events</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/mouse.js"></script>
<script src="../../ui/draggable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#draggable { width: 16em; padding: 0 1em; }
#draggable ul li { margin: 1em 0; padding: 0.5em 0; } * html #draggable ul li { height: 1%; }
#draggable ul li span.ui-icon { float: left; }
#draggable ul li span.count { font-weight: bold; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
var $start_counter = $( "#event-start" ),
$drag_counter = $( "#event-drag" ),
$stop_counter = $( "#event-stop" ),
@@ -47,7 +42,6 @@
// ...then update the numbers
$( "span.count", $event_counter ).text( new_count );
}
});
</script>
</head>
<body>
@@ -4,22 +4,16 @@
<meta charset="utf-8">
<title>jQuery UI Draggable - Handles</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/mouse.js"></script>
<script src="../../ui/draggable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
#draggable p { cursor: move; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#draggable" ).draggable({ handle: "p" });
$( "#draggable2" ).draggable({ cancel: "p.ui-widget-header" });
$( "div, p" ).disableSelection();
});
</script>
</head>
<body>
@@ -4,20 +4,14 @@
<meta charset="utf-8">
<title>jQuery UI Draggable - Revert position</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/mouse.js"></script>
<script src="../../ui/draggable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#draggable" ).draggable({ revert: true });
$( "#draggable2" ).draggable({ revert: true, helper: "clone" });
});
</script>
</head>
<body>
@@ -4,21 +4,15 @@
<meta charset="utf-8">
<title>jQuery UI Draggable - Auto-scroll</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/mouse.js"></script>
<script src="../../ui/draggable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#draggable" ).draggable({ scroll: true });
$( "#draggable2" ).draggable({ scroll: true, scrollSensitivity: 100 });
$( "#draggable3" ).draggable({ scroll: true, scrollSpeed: 100 });
});
</script>
</head>
<body>
@@ -4,25 +4,19 @@
<meta charset="utf-8">
<title>jQuery UI Draggable - Snap to element or grid</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/mouse.js"></script>
<script src="../../ui/draggable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.draggable { width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; }
.ui-widget-header p, .ui-widget-content p { margin: 0; }
#snaptarget { height: 140px; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#draggable" ).draggable({ snap: true });
$( "#draggable2" ).draggable({ snap: ".ui-widget-header" });
$( "#draggable3" ).draggable({ snap: ".ui-widget-header", snapMode: "outer" });
$( "#draggable4" ).draggable({ grid: [ 20, 20 ] });
$( "#draggable5" ).draggable({ grid: [ 80, 80 ] });
});
</script>
</head>
<body>
@@ -4,19 +4,13 @@
<meta charset="utf-8">
<title>jQuery UI Draggable + Sortable</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/mouse.js"></script>
<script src="../../ui/draggable.js"></script>
<script src="../../ui/sortable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 5px; padding: 5px; width: 150px; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js" data-modules="sortable">
$( "#sortable" ).sortable({
revert: true
});
@@ -26,7 +20,6 @@
revert: "invalid"
});
$( "ul, li" ).disableSelection();
});
</script>
</head>
<body>
@@ -4,20 +4,15 @@
<meta charset="utf-8">
<title>jQuery UI Draggable - Visual feedback</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/mouse.js"></script>
<script src="../../ui/draggable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#draggable, #draggable2, #draggable3, #set div { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
#draggable, #draggable2, #draggable3 { margin-bottom:20px; }
#set { clear:both; float:left; width: 368px; height: 120px; }
p { clear:both; margin:0; padding:1em 0; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#draggable" ).draggable({ helper: "original" });
$( "#draggable2" ).draggable({ opacity: 0.7, helper: "clone" });
$( "#draggable3" ).draggable({
@@ -28,7 +23,6 @@
}
});
$( "#set div" ).draggable({ stack: "#set div" });
});
</script>
</head>
<body>

0 comments on commit 41b5b2d

Please sign in to comment.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.