list-style-type: none; width: 210px; height: 220px; float: left;\r
color: white; border: 1px solid gray; text-align: center; font-weight: bold; }\r
\r
-#accordion, #draggable, #droppable,\r
+#accordion, #draggable,\r
#resizable, #selectable, #sortable, #tabs {\r
margin: 10px;\r
width: 190px; height: 180px;\r
background: black;\r
}\r
\r
+.draggable { margin: 10px; width: 32px; height: 30px; float: left; background: #FF9C08; }\r
+#droppable { margin: 10px; width: 190px; height: 130px; float: left; border: 1px solid #FF9C08; overflow: hidden; }\r
+#droppable .draggable { margin: 7px; }\r
+\r
.ui-dialog { background-color: #FF9C08; }\r
.ui-dialog .ui-dialog-titlebar { background: black; padding: 0px; height: 28px; _height: 29px; }\r
.ui-dialog.ui-draggable .ui-dialog-titlebar { cursor: move; }\r
$("#datepicker").datepicker();\r
$("#dialog").click(function() { $("<div/>").dialog(); });\r
$("#draggable").draggable();\r
+ $(".draggable").draggable();\r
+ $("#droppable").droppable({\r
+ accept: '.draggable',\r
+ drop: function(ev, ui) {\r
+ ui.draggable.css({ position: 'relative', top: 0, left: 0 }).clone().appendTo(this);\r
+ }\r
+ });\r
$("#resizable").resizable();\r
$("#selectable").selectable();\r
$("#slider").slider();\r
Draggable\r
<div id="draggable"></div>\r
</li>\r
+<li>\r
+ Droppable\r
+ <div class="draggable">D</div>\r
+ <div class="draggable">R</div>\r
+ <div class="draggable">A</div>\r
+ <div class="draggable">G</div>\r
+ <div id="droppable">\r
+ DROP\r
+ <hr>\r
+ </div>\r
+</li>\r
<li>\r
Resizable\r
<div id="resizable"></div>\r
--- /dev/null
+<!DOCTYPE html>\r
+<html lang="en">\r
+<head>\r
+ <title>Simple Droppable</title>\r
+ <link rel="stylesheet" href="all.css" type="text/css" media="screen">\r
+ <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
+ <script type="text/javascript" src="../../ui/ui.draggable.js"></script>\r
+ <script type="text/javascript" src="../../ui/ui.droppable.js"></script>\r
+ <script type="text/javascript">\r
+ $(function() {\r
+ $(".draggable").draggable();\r
+ $("#droppable").droppable({\r
+ accept: '.draggable',\r
+ drop: function(ev, ui) {\r
+ ui.draggable.css({ position: 'relative', top: 0, left: 0 }).clone().appendTo(this);\r
+ }\r
+ });\r
+ });\r
+ </script>\r
+</head>\r
+<body>\r
+\r
+<ul class="plugins">\r
+<li>\r
+ Droppable\r
+ <div class="draggable">D</div>\r
+ <div class="draggable">R</div>\r
+ <div class="draggable">A</div>\r
+ <div class="draggable">G</div>\r
+ <div id="droppable">\r
+ DROP\r
+ <hr>\r
+ </div>\r
+</li>\r
+</ul>\r
+\r
+</body>\r
+</html>\r
projects / jquery-ui.git / commitdiff