topical media & game development

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) _

lib-present-jquery-desktop-basic-steps-selectable-draggable.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>Selectable and Draggable</title>
    <script>

functions


      SelectionManager = function() {
        this.selectionMap_ = {};
      };
      
      SelectionManager.prototype.select = function(id) {
        this.selectionMap_[id] = id;
        $('#' + id).addClass('ui-selected');
      };
      SelectionManager.prototype.unselect = function(id) {
        delete this.selectionMap_[id];
        $('#' + id).removeClass('ui-selected');
      };

selected


      
      SelectionManager.prototype.isSelected = function(id) {
        return this.selectionMap_[id];
      };        
      
      SelectionManager.prototype.allSelected = function() {
        return this.selectionMap_;
      };
        
       $sel = new SelectionManager();$

ready


      document.ready(function() {
        $('.box').dblclick(function() {
          if (sel.isSelected(this.id)) {
             $sel.unselect(this.id);
          } else {$ sel.select(this.id);
          }
        });

container


        $('#container').selectable({
          selected: function(ev, ui) {
            if (ui.selected.id) {
               $sel.select(ui.selected.id);
            }
          },
          unselected: function(ev, ui) {
            if (ui.unselected.id) {$ sel.unselect(ui.unselected.id);
            }
          },
          filter: '.box'
        });

draggable


        $('.box').draggable({
          opacity: 0.5,
          cursor: 'move',
          zIndex: 10000,
          start: function(ev, ui) {
  
            // figure out all the initial positions for the selected elements
            // and store them.

position(s)


            if ( $sel.isSelected(ui.helper[0].id)) {
              for (id in$ sel.allSelected()) {
                $('#'+id).data(
                  "top0", 
                  parseInt($('#'+id).css("top"),10) - 
                    parseInt($(ui.helper[0]).css("top"),10));
                $('#'+id).data(
                  "left0", 
                  parseInt($('#'+id).css("left"),10) - 
                    parseInt($(ui.helper[0]).css("left"),10));
              }
            }
          },

drag


          drag: function(ev, ui) {
            if ( $sel.isSelected(ui.helper[0].id)) {
              for (id in$ sel.allSelected()) {
                if (id != ui.helper[0].id) {
                  $('#' + id).css('top',
                                  $('#'+id).data("top0") + ui.position.top);
                  $('#' + id).css('left', 
                                  $('#'+id).data("left0") + ui.position.left);              
                }
              }
            }
          },

stop


          stop: function(ev, ui) {
            if ( $sel.isSelected(ui.helper[0].id)) {
              for (id in$ sel.allSelected()) {
               $('#'+id).removeData("top0");
               $('#'+id).removeData("left0");
              }
            }        
          }
        });
        
      });
    </script>

style


    <style type="text/css" media="screen">
      .ui-selected, .ui-unselecting {
        border: 5px solid purple !important;
      }
      
      .box {
        cursor: move;
      }  
    </style>
  </head>

body


  <body>
    <h1>Selectable and Draggable</h1>
    <p>
      This demo demonstrates how to create selectable items and make them draggable. In this way you can drag single items, or select many of them and drag them as a whole. You can either doubleclick the items or use box-selection. Then drag the selected items around the screen. Use <tt>right click > view source</tt> to see the underlying Javascript code.
    </p>

container(s)


    <div id="container">
      <div id="box1" class="box">Blue</div>
      <div id="box2" class="box">Red</div>
      <div id="box3" class="box">Yellow</div>
      <div id="box4" class="box">Green</div>
    </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) _

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.