[Summary view] [Print] [Text view]

   1  <script type="text/javascript">
   2  
   3      var model = {
   4  
   5          renderAt: '#containerDemo',
   6  
   7          title: 'Draggable Demos',
   8  
   9          demos: [
  10  
  11              {
  12                  title: 'Simple image drag',
  13                  desc: 'You also can make images draggable!',
  14                  html: '<img id="dragImage" src="templates/images/puppy.jpg" style="width: 228px; height:157px;">',
  15                  destroy: '$("#dragImage").draggable("destroy");',
  16  
  17                  options: [
  18                      {    desc: 'Using a helper clone',    source: '$("#dragImage").draggable({ helper: "clone" });' },
  19                      {    desc: 'Simple Drag',    source: '$("#dragImage").draggable();' },
  20                      {    desc: 'Axis x',    source: '$("#dragImage").draggable({ axis: "x" });' },
  21                      {    desc: 'Axis y',    source: '$("#dragImage").draggable({ axis: "y" });' },
  22                      {    desc: 'Axis x, Change cursor',    source: '$("#dragImage").draggable({ axis: "x", cursor: "move" });' },
  23                      {    desc: 'Cursor position [top/left]',    source: '$("#dragImage").draggable({ cursorAt: {top: 2, left: 2 } });' },
  24                      {    desc: 'Cursor position [right/bottom]',    source: '$("#dragImage").draggable({ cursorAt: {bottom: 20, right: 14} });' },
  25                      {    desc: 'Drag on a Grid',    source: '$("#dragImage").draggable({ grid: [50, 50] });' },
  26                      {    desc: 'Change the opacity',    source: '$("#dragImage").draggable({ opacity: 0.40 });' },
  27                      {    desc: 'Drag and Revert to the original position',    source: '$("#dragImage").draggable({ revert: true, helper: "clone" });' }
  28                  ]
  29              },
  30  
  31              {
  32                  title: 'Drag div element',
  33                  desc: 'With few lines of code you could make a div draggable. You can try more options on the fly!',
  34                  html: '<div id="divDrag" class="draggable">Drag me</div><br>',
  35                  destroy: '$("#divDrag").draggable("destroy");',
  36                  options: [
  37                      {    desc: 'Simple Drag',    source: '$("#divDrag").draggable();' },
  38                      {    desc: 'Dragging elements in a Region',    source: '$("#divDrag").draggable({ containment: "parent" });' },
  39                      {    desc: 'Axis x',    source: '$("#divDrag").draggable({ axis: "x" });' },
  40                      {    desc: 'Axis y',    source: '$("#divDrag").draggable({ axis: "y" });' },
  41                      {    desc: 'Axis x, Change cursor',    source: '$("#divDrag").draggable({ axis: "x", cursor: "move" });' },
  42                      {    desc: 'Cursor position [top/left]',    source: '$("#divDrag").draggable({ cursorAt: {top: 2, left: 2 } });' },
  43                      {    desc: 'Cursor position [right/bottom]',    source: '$("#divDrag").draggable({ cursorAt: {bottom: 20, right: 14} });' },
  44                      {    desc: 'Drag on a Grid',    source: '$("#divDrag").draggable({ grid: [50, 50] });' },
  45                      {    desc: 'Using a helper clone',    source: '$("#divDrag").draggable({ helper: "clone" });' },
  46                      {    desc: 'Change the opacity',    source: '$("#divDrag").draggable({ opacity: 0.40 });' },
  47                      {    desc: 'Drag and Revert to the original position',    source: '$("#divDrag").draggable({ revert: true, helper: "clone" });' }
  48                  ]
  49              },
  50  
  51              {
  52                  title: 'Drag with a handle',
  53                  desc: 'Drag element by a handle.',
  54                  html: '<div id="draggable-handle-div" class="draggable"><div class="drag-handle"></div>Drag me</div>',
  55                  destroy: '$("#draggable-handle-div").draggable("destroy");',
  56  
  57                  options: [
  58                      {    desc: 'Drag using a handle',    source: '$("#draggable-handle-div").draggable({ handle: "div" });' },
  59                      {    desc: 'Drag using a handle with a helper',    source: '$("#draggable-handle-div").draggable({ helper: "clone", handle: "div" });' }
  60                  ]
  61              },
  62  
  63              {
  64                  title: 'Drag prevention for pre-defined elements',
  65                  desc: 'You can change elements to not drag the parent.',
  66                  html: '<div id="draggable-dragPrevention" class="draggable"><a href="#">Drag me</a><br><input type="text" value="select me" style="width: 80px; font-size: 10px;" /></div>',
  67                  destroy: '$("#draggable-dragPrevention").draggable("destroy");',
  68  
  69                  options: [
  70                      {    desc: 'Drag using a handle',    source: '$("#draggable-dragPrevention").draggable({ cancel: "a,input,textarea" });' },
  71                      {    desc: 'Drag using a handle with a helper',    source: '$("#draggable-dragPrevention").draggable({ helper: "clone", cancel: "a,input,textarea" });' }
  72                  ]
  73              }
  74  
  75          ]
  76  
  77      };
  78  
  79      $(function(){
  80  
  81          uiRenderDemo(model);
  82  
  83      });
  84  
  85  </script>