swat/apps/qooxdoo-examples/test/List_2.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>qooxdoo &raquo; Demo</title>
   5   <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
   6   <!--[if IE]>
   7   <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
   8   <![endif]-->
   9   <script type="text/javascript" src="../../script/qx.js"></script>
  10 </head>
  11 <body>
  12   <script type="text/javascript" src="../../script/layout.js"></script>
  13
  14   <div id="demoDescription">
  15     <p>List implementation</p>
  16     <p>Drag and Drop Handling added</p>
  17   </div>
  18
  19   <script type="text/javascript">
  20     qx.core.Init.getInstance().defineMain(function()
  21     {
  22       var doc = qx.ui.core.ClientDocument.getInstance();
  23
  24       // Create list to drag from
  25
  26
  27       var sourceList = new qx.ui.form.List();
  28       sourceList.setWidth(100);
  29       sourceList.setHeight(250);
  30       sourceList.setLeft(20);
  31       sourceList.setTop(48);
  32
  33       // Set vertical scroll bar to always visible
  34       sourceList.setOverflow("scrollY");
  35       // Set selection mode to single explicitly
  36       // sourceList.getManager().setMultiSelection(false);
  37       // Set drag selection mode to off
  38       sourceList.getManager().setDragSelection(false);
  39
  40       // Add items to source list
  41
  42       for (var i = 1; i <= 10; i++)
  43       {
  44         var item = new qx.ui.form.ListItem("Item " + i);
  45         item.addEventListener("dragstart", handleStartDrag);
  46         sourceList.add(item);
  47       };
  48
  49       doc.add(sourceList);
  50
  51
  52
  53       // Create list to drop to
  54
  55       var destList = new qx.ui.form.List();
  56       destList.setWidth(100);
  57       destList.setHeight(250);
  58       destList.setLeft(320);
  59       destList.setTop(48);
  60
  61       // Set vertical scroll bar to always visible
  62       destList.setOverflow("scrollY");
  63       // Set selection mode to single explicitly
  64       // destList.getManager().setMultiSelection(false);
  65       // Set drag selection mode to off
  66       destList.getManager().setDragSelection(false);
  67
  68       doc.add(destList);
  69
  70       // Define event handlers
  71
  72       function handleStartDrag(e)
  73       {
  74         e.addData("ListItems", qx.lang.Array.copy(sourceList.getManager().getSelectedItems()));
  75         e.addAction("move");
  76         e.startDrag();
  77       };
  78
  79       function handleListDrop(e)
  80       {
  81         var type = e.getDropDataTypes()[0];
  82         var data = e.getData(type);
  83
  84         // this.debug("Drag&Drop Action: " + e.getAction());
  85
  86         switch(e.getAction())
  87         {
  88           case "move":
  89             sourceList.getManager().setSelectedItems([]);
  90             sourceList.getManager().setAnchorItem(null);
  91             sourceList.getManager().setLeadItem(null);
  92
  93             for (var i=0, l=data.length; i<l; i++) {
  94               destList.add(data[i]);
  95             };
  96
  97             destList.getManager().setSelectedItems(data);
  98             break;
  99         };
 100       };
 101
 102
 103
 104       // Set event properties for destination list
 105
 106       destList.setDropDataTypes(["ListItems"]);
 107       destList.addEventListener("dragdrop", handleListDrop);
 108     });
 109   </script>
 110 </body>
 111 </html>