jack
/
cocorobolx


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264
							<!DOCTYPE html>
<html>
<!--
Copyright 2010 The Closure Library Authors. All Rights Reserved.

Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
  <title>goog.fx.DragDrop</title>
  <meta charset="utf-8">
  <script src="../base.js"></script>
  <script>
    goog.require('goog.fx.DragDrop');
    goog.require('goog.fx.DragDropGroup');
    goog.require('goog.dom');
    goog.require('goog.dom.TagName');
  </script>
  <link rel="stylesheet" href="css/demo.css">
  <style>
    body {
      margin: 10px;
    }
    ul {
      padding: 0px;
    }
    li {
      list-style: none;
    }
    li, div {
      font: menu;
      width: 20ex;
      border: 1px solid gray;
      margin: 1px;
      padding: 0px 2px 0px 2px;
      background: silver;
    }
    .source {
      cursor: move;
      -moz-user-select: none;
    }
    .drag {
      cursor: move;
      background: green;
     }
    .target {

    }
    #list2 {
      margin: 0px 30px 30px 30px;
      padding-left: 30px;
    }
    .foo {
      position: absolute;
      background: pink;
      padding: 5px;
    }
  </style>
</head>
<body>
<h1>goog.fx.DragDrop</h1>

List 1 (combined source/target, can be dropped on list 1, list 2, button 1 or
button 2).
<ul id="list1">
  <li>Item 1.1</li>
  <li>Item 1.2</li>
  <li>Item 1.3</li>
  <li>Item 1.4</li>
  <li>Item 1.5</li>
  <li>Item 1.6</li>
  <li>Item 1.7</li>
  <li>Item 1.8</li>
  <li>Item 1.9</li>
  <li>Item 1.10</li>
  <li>Item 1.11</li>
  <li>Item 1.12</li>
  <li>Item 1.13</li>
  <li>Item 1.14</li>
  <li>Item 1.15</li>
</ul>

List 2 (source only, can be dropped on list 1 or button 2)
<ul id="list2">
  <li>Item 2.1</li>
  <li>Item 2.2</li>
  <li>Item 2.3</li>
  <li>Item 2.4</li>
  <li>Item 2.5</li>
  <li>Item 2.6</li>
  <li>Item 2.7</li>
  <li>Item 2.8</li>
  <li>Item 2.9</li>
  <li>Item 2.10</li>
  <li>Item 2.11</li>
  <li>Item 2.12</li>
  <li>Item 2.13</li>
  <li>Item 2.14</li>
  <li>Item 2.15</li>
</ul>

<div id="button1">
  Button 1 (combined source/target, can be dropped on list 1)
</div>

<div id="button2">
  Button 2 (target only)
</div>


<script>
  // Custom implementation demo. Overrides createDragElement and
  // positionDragElement.
  function FooDrag(element, opt_data) {
    goog.fx.DragDrop.call(this, element, opt_data);
  }
  goog.inherits(FooDrag, goog.fx.DragDrop);

  FooDrag.prototype.createDragElement = function(sourceEl) {
    return goog.dom.createDom(goog.dom.TagName.DIV, 'foo', 'Custom drag element');
  };

  FooDrag.prototype.getDragElementPosition = function(sourceEl, el, event) {
    return new goog.math.Coordinate(event.clientX, event.clientY);
  };


  var button1, button2, list1, list2, i, len, nodes, el;

  // Create drop targets (either by id or element reference)
  button1 = new FooDrag(
    document.getElementById('button1'), 'button 1'
  );
  button2 = new goog.fx.DragDrop('button2', 'button 2');

  // Create drag clusters (multiple elements shares the same
  // drag properties)
  list1 = new goog.fx.DragDropGroup();
  list2 = new goog.fx.DragDropGroup();

  nodes = document.getElementById('list1').childNodes;
  len = nodes.length;
  for (i = 0; i < len; i++) {
    el = nodes[i];
    if ((el.nodeType == 1) && (el.nodeName == 'LI')) {
      list1.addItem(el, el.firstChild.nodeValue);
    }
  }

  nodes = document.getElementById('list2').childNodes;
  len = nodes.length;
  for (i = 0; i < len; i++) {
    el = nodes[i];
    if ((el.nodeType == 1) && (el.nodeName == 'LI')) {
      list2.addItem(el, el.firstChild.nodeValue);
    }
  }

  // Set valid targets for list1
  list1.addTarget(button1);
  list1.addTarget(button2);
  list1.addTarget(list1);

  // Set valid targets for list2
  list2.addTarget(button2);
  list2.addTarget(list1);

  // Set valid target for button1 (allow button1 to be dragged onto list1)
  button1.addTarget(list1);

  // Set additional classes used to indicate dragging
  button1.setSourceClass('source');
  button1.setTargetClass('target');
  button1.setDragClass('drag');
  button2.setSourceClass('source');
  button2.setTargetClass('target');
  list1.setSourceClass('source');
  list1.setTargetClass('target');
  list2.setSourceClass('source');

  // Init drag objects
  button1.init();
  button2.init();
  list1.init();
  list2.init();

  // Set up event handlers
  goog.events.listen(list1, 'dragover', dragOver);
  goog.events.listen(list1, 'dragout', dragOut);
  goog.events.listen(list1, 'drop', dropList1);
  goog.events.listen(list1, 'drag', dragList1);
  goog.events.listen(list1, 'dragstart', dragStart);
  goog.events.listen(list1, 'dragend', dragEnd);

  goog.events.listen(list2, 'dragover', dragOver);
  goog.events.listen(list2, 'dragout', dragOut);
  goog.events.listen(list2, 'drop', drop);
  goog.events.listen(list2, 'dragstart', dragStart);
  goog.events.listen(list2, 'dragend', dragEnd);

  goog.events.listen(button1, 'dragover', dragOver);
  goog.events.listen(button1, 'dragout', dragOut);
  goog.events.listen(button1, 'drop', drop);
  goog.events.listen(button1, 'dragstart', dragStart);
  goog.events.listen(button1, 'dragend', dragEnd);

  goog.events.listen(button2, 'dragover', dragOver);
  goog.events.listen(button2, 'dragout', dragOut);
  goog.events.listen(button2, 'drop', drop);

  goog.events.listen(document.getElementById('button1'), 'click',
                     function(e) { alert('click'); });

  function dragOver(event) {
    event.dropTargetItem.element.style.background = 'red';
  }

  function dragOut(event) {
    event.dropTargetItem.element.style.background = 'silver';
  }

  function drop(event) {
    event.dropTargetItem.element.style.background = 'silver';
    var str = [
      event.dragSourceItem.data,
      ' dropped onto ',
      event.dropTargetItem.data,
      ' at ',
      event.viewportX,
      'x',
      event.viewportY
    ];
    alert(str.join(''));
  }

  function dropList1(event) {
    event.dropTargetItem.element.style.background = 'silver';
    var str = [
      event.dragSourceItem.data,
      ' dropped onto ',
      event.dropTargetItem.data,
      ' in list 1.'
    ];
    alert(str.join(''));
  }

  function dragList1(event) {
    var str = [
      event.dragSourceItem.data,
      ' dragged from list 1'
    ];
    alert(str.join(''));
  }

  function dragStart(event) {
    goog.style.setOpacity(event.dragSourceItem.element, 0.5);
  }

  function dragEnd(event) {
    goog.style.setOpacity(event.dragSourceItem.element, 1.0);
  }
</script>
</body>
</html>