library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-12-07 06:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Droppable: Update demos to use AMD

Browse Source 
Ref #10119
This commit is contained in:
Alexander Schmitz 2015-06-30 17:18:16 -04:00
parent 41b5b2d7a9
commit 6acdd4a444
6 changed files with 13 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
demos/droppable/accepted-elements.html
View File

@ -4,19 +4,13 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery UI Droppable - Accept</title> <title>jQuery UI Droppable - Accept</title>
<link rel="stylesheet" href="../../themes/base/all.css"> <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/droppable.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<style> <style>
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
#draggable, #draggable-nonvalid { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #draggable, #draggable-nonvalid { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
</style> </style>
<script> <script src="../../external/requirejs/require.js"></script>
$(function() { <script src="../bootstrap.js">
$( "#draggable, #draggable-nonvalid" ).draggable(); $( "#draggable, #draggable-nonvalid" ).draggable();
$( "#droppable" ).droppable({ $( "#droppable" ).droppable({
accept: "#draggable", accept: "#draggable",
@ -31,7 +25,6 @@
.html( "Dropped!" ); .html( "Dropped!" );
} }
}); });
});
</script> </script>
</head> </head>
<body> <body>

11
demos/droppable/default.html
View File

@ -4,19 +4,13 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery UI Droppable - Default functionality</title> <title>jQuery UI Droppable - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/all.css"> <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/droppable.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<style> <style>
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</style> </style>
<script> <script src="../../external/requirejs/require.js"></script>
$(function() { <script src="../bootstrap.js">
$( "#draggable" ).draggable(); $( "#draggable" ).draggable();
$( "#droppable" ).droppable({ $( "#droppable" ).droppable({
drop: function( event, ui ) { drop: function( event, ui ) {
@ -26,7 +20,6 @@
.html( "Dropped!" ); .html( "Dropped!" );
} }
}); });
});
</script> </script>
</head> </head>
<body> <body>

16
demos/droppable/photo-manager.html
View File

@ -4,16 +4,6 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery UI Droppable - Simple photo manager</title> <title>jQuery UI Droppable - Simple photo manager</title>
<link rel="stylesheet" href="../../themes/base/all.css"> <link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/position.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/droppable.js"></script>
<script src="../../ui/resizable.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/dialog.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<style> <style>
#gallery { float: left; width: 65%; min-height: 12em; } #gallery { float: left; width: 65%; min-height: 12em; }
@ -29,8 +19,9 @@
#trash h4 .ui-icon { float: left; } #trash h4 .ui-icon { float: left; }
#trash .gallery h5 { display: none; } #trash .gallery h5 { display: none; }
</style> </style>
<script> <script src="../../external/requirejs/require.js"></script>
$(function() { <script src="../bootstrap.js" data-modules="dialog">
// there's the gallery and the trash // there's the gallery and the trash
var $gallery = $( "#gallery" ), var $gallery = $( "#gallery" ),
$trash = $( "#trash" ); $trash = $( "#trash" );
@ -138,7 +129,6 @@
return false; return false;
}); });
});
</script> </script>
</head> </head>
<body> <body>

11
demos/droppable/propagation.html
View File

@ -4,20 +4,14 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery UI Droppable - Prevent propagation</title> <title>jQuery UI Droppable - Prevent propagation</title>
<link rel="stylesheet" href="../../themes/base/all.css"> <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/droppable.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<style> <style>
#draggable { width: 100px; height: 40px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #draggable { width: 100px; height: 40px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable, #droppable2 { width: 230px; height: 120px; padding: 0.5em; float: left; margin: 10px; } #droppable, #droppable2 { width: 230px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
#droppable-inner, #droppable2-inner { width: 170px; height: 60px; padding: 0.5em; float: left; margin: 10px; } #droppable-inner, #droppable2-inner { width: 170px; height: 60px; padding: 0.5em; float: left; margin: 10px; }
</style> </style>
<script> <script src="../../external/requirejs/require.js"></script>
$(function() { <script src="../bootstrap.js">
$( "#draggable" ).draggable(); $( "#draggable" ).draggable();
$( "#droppable, #droppable-inner" ).droppable({ $( "#droppable, #droppable-inner" ).droppable({
@ -47,7 +41,6 @@
.html( "Dropped!" ); .html( "Dropped!" );
} }
}); });
});
</script> </script>
</head> </head>
<body> <body>

11
demos/droppable/revert.html
View File

@ -4,19 +4,13 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery UI Droppable - Revert draggable position</title> <title>jQuery UI Droppable - Revert draggable position</title>
<link rel="stylesheet" href="../../themes/base/all.css"> <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/droppable.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<style> <style>
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</style> </style>
<script> <script src="../../external/requirejs/require.js"></script>
$(function() { <script src="../bootstrap.js">
$( "#draggable" ).draggable({ revert: "valid" }); $( "#draggable" ).draggable({ revert: "valid" });
$( "#draggable2" ).draggable({ revert: "invalid" }); $( "#draggable2" ).draggable({ revert: "invalid" });
@ -32,7 +26,6 @@
.html( "Dropped!" ); .html( "Dropped!" );
} }
}); });
});
</script> </script>
</head> </head>
<body> <body>

11
demos/droppable/visual-feedback.html
View File

@ -4,20 +4,14 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery UI Droppable - Visual feedback</title> <title>jQuery UI Droppable - Visual feedback</title>
<link rel="stylesheet" href="../../themes/base/all.css"> <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/droppable.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<style> <style>
#draggable, #draggable2 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #draggable, #draggable2 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable, #droppable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px; } #droppable, #droppable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
h3 { clear: left; } h3 { clear: left; }
</style> </style>
<script> <script src="../../external/requirejs/require.js"></script>
$(function() { <script src="../bootstrap.js">
$( "#draggable" ).draggable(); $( "#draggable" ).draggable();
$( "#droppable" ).droppable({ $( "#droppable" ).droppable({
classes: { classes: {
@ -44,7 +38,6 @@
.html( "Dropped!" ); .html( "Dropped!" );
} }
}); });
});
</script> </script>
</head> </head>
<body> <body>