topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

lib-present-jquery-desktop-basic-steps-draggable-group.htm / htm



  <html>

head 


  <head>
    <script src="lib-present-jquery-desktop-basic-steps-lib-jquery-1.2.6.js"></script>
    <script src="lib-present-jquery-desktop-basic-steps-lib-jquery-ui-core-drag-drop-select-1.5.3.js"></script>
    <link rel="stylesheet" href="lib-present-jquery-desktop-basic-steps-css-demo.css" type="text/css" media="screen" charset="utf-8">
    <title>Group Draggable</title>
    <script>

ready


      document.ready(function() {
        
        // define which elements will move concurrently with a dragged one.
        var dragGroups = {
          // dragged item : affected items
          'box1' : [ 'box2' ],
          'box2' : [],
          'box3' : [ 'box1', 'box4'],
          'box4' : []
        };

draggable


        $('.box').draggable({
          opacity: 0.5,
          cursor: 'move',
          zIndex: 10000,
          
          // figure out all the initial positions for the affected elements,
          // relative to the one being dragged, and store them.
          // We use the data() function to store temporary information on the
          // objects themselves.

start


          start: function(ev, ui) {
            ids = dragGroups[ui.helper[0].id];
            for (var i = 0; i < ids.length; i++) {
              $('#' + ids[i]).data(
                  "top0", 
                  parseInt($('#' + ids[i]).css("top"),10) - 
                    parseInt($(ui.helper[0]).css("top"),10));
              $('#' + ids[i]).data(
                "left0", 
                parseInt($('#' + ids[i]).css("left"),10) - 
                  parseInt($(ui.helper[0]).css("left"),10));                
            }          
          },

drag


          // whenever the dragged item moves, update the positions of all
          // the affected items, updating their position with the same relative
          // offset.
          drag: function(ev, ui) {
            ids = dragGroups[ui.helper[0].id];          
            for (var i = 0; i < ids.length; i++) {
              if (ids[i] != ui.helper[0].id) {
                $('#' + ids[i]).css('top',
                                $('#'+ids[i]).data("top0") + ui.position.top);
                $('#' + ids[i]).css('left', 
                                $('#'+ids[i]).data("left0") + ui.position.left);              
              }
            }
          },

stop


          // cleanup temporary data at the end
          stop: function(ev, ui) {
            ids = dragGroups[ui.helper[0].id];          
            for (var i = 0; i < ids.length; i++) {          
               $('#'+ids[i]).removeData("top0");
               $('#'+ids[i]).removeData("left0");
            }        
          }        
        });
      });
    </script>

style 


    <style type="text/css" media="screen">
      .box {
        cursor: move;
      }
    </style>
  </head>

body 


  <body>
    <h1>Group Draggble</h1>
    <p>
      This demo demonstrates how to create draggable items. Try dragging items around. Items are bound together, so when dragging one item others move as well. Use <tt>right click > view source</tt> to see the underlying Javascript code.
    </p>

boxes 


    <div id="box1" class="box">Blue<br />Red is dragged along with me.</div>
    <div id="box2" class="box">Red</div>
    <div id="box3" class="box">Yellow<br />Blue and Green are dragged along with me.</div>
    <div id="box4" class="box">Green</div>
  </body>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.