third-party/jquery-ui-1.10.2/tests/visual/compound/draggable_accordion.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>Compound Visual Test : Draggable in Accordion</title>
   6         <link rel="stylesheet" href="../visual.css">
   7         <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
   8         <script src="../../../jquery-1.9.1.js"></script>
   9         <script src="../../../ui/jquery.ui.core.js"></script>
  10         <script src="../../../ui/jquery.ui.widget.js"></script>
  11         <script src="../../../ui/jquery.ui.mouse.js"></script>
  12         <script src="../../../ui/jquery.ui.accordion.js"></script>
  13         <script src="../../../ui/jquery.ui.draggable.js"></script>
  14         <style>
  15         .draggable {
  16                 width: 10em;
  17                 margin: 0.5em;
  18         }
  19         </style>
  20         <script>
  21         $(function() {
  22                 $( ".draggable" ).addClass( "ui-widget ui-widget-content ui-corner-all" )
  23                 $( "#first .draggable" ).draggable();
  24                 $( "#second .draggable" ).draggable({
  25                         appendTo: "body"
  26                 });
  27                 $( "#third .draggable" ).draggable({
  28                         helper: "clone",
  29                         appendTo: "body"
  30                 });
  31                 $( "#accordion" ).accordion();
  32         });
  33         </script>
  34 </head>
  35 <body>
  36
  37 <div id="accordion">
  38         <h3>.draggable()</h3>
  39         <div id="first">
  40                 <div class="draggable">Draggable 1-1</div>
  41                 <div class="draggable">Draggable 1-2</div>
  42                 <div class="draggable">Draggable 1-3</div>
  43                 <div class="draggable">Draggable 1-4</div>
  44                 <div class="draggable">Draggable 1-5</div>
  45         </div>
  46         <h3>.draggable({ appendTo: "body" })</h3>
  47         <div id="second">
  48                 <div class="draggable">Draggable 2-1</div>
  49                 <div class="draggable">Draggable 2-2</div>
  50                 <div class="draggable">Draggable 2-3</div>
  51                 <div class="draggable">Draggable 2-4</div>
  52                 <div class="draggable">Draggable 2-5</div>
  53         </div>
  54         <h3>.draggable({ helper: "clone", appendTo: "body" })</h3>
  55         <div id="third">
  56                 <div class="draggable">Draggable 3-1</div>
  57                 <div class="draggable">Draggable 3-2</div>
  58                 <div class="draggable">Draggable 3-3</div>
  59                 <div class="draggable">Draggable 3-4</div>
  60                 <div class="draggable">Draggable 3-5</div>
  61         </div>
  62 </div>
  63
  64 </body>
  65 </html>