JavaScript DHTML/Rico/Drag Drop — различия между версиями

Текущая версия на 07:26, 26 мая 2010

Содержание

1 Rico Drag-and-Drop: LiveGrids
2 Rico Drag and Drop with Custom Drag Class
3 Rico Drag and Drop - with dynamically created drop zones
4 Rico Simple Drag and Drop Example
5 Track drop-and-drop objects as they are moved by the user

Rico Drag-and-Drop: LiveGrids

 
<!--
Apache License, Version 2.0
Revised from Rico 2.0  demo code.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Rico Drag-n-Drop Grids</title>
<script src="rico21/src/rico.js" type="text/javascript"></script>
<script type="text/javascript">
Rico.loadModule("LiveGrid","LiveGridMenu","DragAndDrop","greenHdg.css");
var names = [ ["Holloman", "Debbie"],
              ["Barnes", "Pat"], 
              ["Dampier", "Joan"], 
              ["Alvarez", "Randy"],
              ["Neil", "William"], 
              ["Hardoway", "Kimber"],
              ["Story", "Leslie"],
              ["Lott", "Charlie"],
              ["Patton", "Sabrina"], 
              ["Lopez", "Juan" ] ];
var grid_ids=["nameList","nameListDeleted","dropZone1","dropZone2"]
var CustomDraggable, logger, grid=[], buffer=[];
Rico.onLoad( function() {
  logger=$("logger");
  logger.value="";
  // initialize all 4 grids with the same options
  
  var opts = {  
    useUnformattedColWidth: false,
    visibleRows  : "parent",
    columnSpecs  : [{Hdg:"Last Name", canDrag:true},
                    {Hdg:"First Name", canDrag:true}]
  };
  for (var i=0; i<4; i++) {
    buffer[i]=new Rico.Buffer.Base();
    grid[i]=new Rico.LiveGrid (grid_ids[i], buffer[i], opts);
  }
  
  // load data into the first grid
  
  buffer[0].loadRowsFromArray(names);
  buffer[0].fetch(0);
  // initialize the drop zones (the other 3 grids)
  
  var CustomDropzone = Class.create();
  CustomDropzone.prototype = Object.extend(new Rico.Dropzone(), CustomDropzoneMethods);
  dndMgr.registerDropZone( new CustomDropzone(grid[1]));
  dndMgr.registerDropZone( new CustomDropzone(grid[2]));
  dndMgr.registerDropZone( new CustomDropzone(grid[3]));
});

var CustomDropzoneMethods = {
  initialize: function( grid ) {
    this.liveGrid     = grid;
    this.htmlElement  = grid.outerDiv;
    this.absoluteRect = null;
  },
  accept: function(draggableObjects) {
    for ( var i = 0 ; i < draggableObjects.length ; i++ ) {
      
      // copy data from drag grid buffer to drop grid buffer
      
      var srcGrid = draggableObjects[i].liveGrid;
      if (srcGrid==this.liveGrid) continue;
      var srcRow  = srcGrid.buffer.bufferRow(draggableObjects[i].dragRow);
      var newRows = this.liveGrid.buffer.appendRows(1);
      for (var c=0; c < srcGrid.columns.length; c++)
        newRows[0][c]=srcGrid.buffer.getValue(srcRow,c)
      logger.value+="CustomDropzone.accept: " + draggableObjects[i].htmlElement.innerHTML + " from [" + srcGrid.tableId +"] to [" + this.liveGrid.tableId +"]\n";
      
      // refresh drop grid
      this.liveGrid.buffer.fetch(0);
      this.liveGrid.scrollToRow(this.liveGrid.buffer.size-1); // scroll to the end
      
      // remove item from drag grid
      
      srcGrid.buffer.deleteRows(srcRow);
      srcGrid.buffer.fetch(Math.min(srcGrid.lastRowPos || 0, srcGrid.topOfLastPage()-1));
    }
  }
}
</script>
<style type="text/css">
body, p {
  font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
}
h1 { font-size: 16pt; }
.logBox {
  background-color : #ffffee;
  border : 1px solid #888;
  font-size : 8pt;
}
.zone {
  padding: 0px;
  width:250px;
  height:150px;
  overflow:hidden;
  margin-left:8px;
  margin-bottom:8px;
  float:left;
  position: relative;
}
.catHeader {
  font-family : Arial;
  font-weight : bold;
  font-size : 11px;
  color : #5b5b5b;
  margin-left : 8px;
  margin-top : 12px;
  margin-bottom: 0px;
  display : block;
}
.LiveGridDraggable {
  background-color : #E0DDB5;
  color            : #5b5b5b;
  border           : 1px solid #5b5b5b;
  filter           : alpha(Opacity=70);
  opacity          : 0.7;
  -moz-opacity     : 0.7;
  padding          : 1px 5px 1px 5px;
  font-size        : 11px;
}
div.ricoLG_outerDiv {
  border: 1px solid #888;
  background-color:#FFF;
}
#exampleContainer {
  float:left;
  background-color:#DDD;
}
</style>
</head>

<body>
<h1>Rico Drag-and-Drop: LiveGrids</h1>
<p>This example demonstrates how to enable drag-and-drop actions between LiveGrids. 
Drag either a first or last name from the upper left grid to any of the other 3 grids.
Log messages demonstrate that the items can be tracked.</p>
<div id="exampleContainer">
<div>
<div id="dragBox" class="zone">
  <p class="catHeader"><span id="nameList_bookmark">&nbsp;</span></p>
  <div id="nameList"></div>
</div>
<div id="deleteZone" class="zone">
  <span class="catHeader">Delete zone</span>
  <div id="nameListDeleted"></div>
</div>
</div>
<div style="clear:both">
<div id="dropBox1" class="zone">
  <span class="catHeader">Drop1</span>
  <div id="dropZone1"></div>
</div>
<div id="dropBox2" class="zone">
  <span class="catHeader">Drop2</span>
  <div id="dropZone2"></div>
</div>
</div>
<div style="clear:both;margin:8px;">
  <span id="loghead" class="catHeader">drag-n-drop message log:</span>
  <textarea class="logBox" id="logger" rows="6" cols="80"></textarea>
</div>
</div>
</body>
</html>

Rico Drag and Drop with Custom Drag Class

 

<!--
Apache License, Version 2.0
Revised from Rico 2.0  demo code.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Rico Custom Draggable</title>
<script src="rico21/src/rico.js" type="text/javascript"></script>
<script type="text/javascript">
Rico.loadModule("DragAndDrop");
var CustomDraggable;
Rico.onLoad( function() {
  Rico.setDebugArea("logger");
  CustomDraggable = Class.create();
  checkQueryString();
  CustomDraggable.prototype = Object.extend(new Rico.Draggable(), CustomDraggableMethods);
  writeNameSpans();
  createDraggables();
  dndMgr.registerDropZone( new Rico.Dropzone($("dropZone")));
});
function checkQueryString() {
  var inputs=document.getElementsByTagName("input");
  var s=window.location.search;
  for (var i=0; i<inputs.length; i++) {
    if (s.indexOf(inputs[i].id+"=") >= 0) {
      CustomDraggable[inputs[i].id]=true;
      inputs[i].checked=true;
    }
    inputs[i].onclick=function() { document.forms[0].submit(); };
  }
}
var names = [ "Holloman, Debbie", "Barnes, Pat", "Dampier, Joan", "Alvarez, Randy",
              "Neil, William", "Hardoway, Kimber", "Story, Leslie", "Lott, Charlie",
              "Patton, Sabrina", "Lopez, Juan" ];
function writeNameSpans() {
  var s="";
  for ( var i = 0 ; i < names.length ; i++ )
    s+="<div id="d" + i + "">" + names[i] + "<\/div>";
  $("nameList").innerHTML=s;
}
function createDraggables() {
   for ( var i = 0 ; i < names.length ; i++ )
      dndMgr.registerDraggable( new CustomDraggable($("d"+i), names[i]) );
}
/**
 *  Sample "CustomDraggable" object which extends the Rico.Draggable to
 *  override the behaviors associated with a draggable object...
 **/
var CustomDraggableMethods = {
   initialize: function( htmlElement, name ) {
      this.type        = "Custom";
      this.htmlElement = $(htmlElement);
      this.name        = name;
   },
   select: function() {
      this.selected = true;
      var el = this.htmlElement;
      // show the item selected.....
      el.style.color           = "#ffffff";
      el.style.backgroundColor = "#08246b";
   },
   deselect: function() {
      this.selected = false;
      var el = this.htmlElement;
      el.style.color           = "#2b2b2b";
      el.style.backgroundColor = "transparent";
   },
   startDrag: function() {
      Rico.writeDebugMsg("startDrag: [" + this.name +"]");
   },
   cancelDrag: function() {
      Rico.writeDebugMsg("cancelDrag: [" + this.name +"]");
   },
   endDrag: function() {
      Rico.writeDebugMsg("endDrag: [" + this.name +"]");
      if ( CustomDraggable.removeOnDrop )
         this.htmlElement.style.display = "none";
   },
   getSingleObjectDragGUI: function() {
      var div = document.createElement("div");
      div.className = "customDraggable";
      div.style.width = (this.htmlElement.offsetWidth - 10) + "px";
      Element.insert(div,this.name);
      return div;
   },
   getDroppedGUI: function() {
      var div = document.createElement("div");
      var n=this.name
      if (CustomDraggable.reverseNamesOnDrop) {
        var names = n.split(",");
        n=names[1].substring(1) + " " + names[0];
      }
      Element.insert(div,"[" + n + "]");
      return div;
   },
   toString: function() {
      return this.name;
   }
}
</script>
<style type="text/css">
body, p {
  font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
}
h1 { font-size: 16pt; }
span.code {
  font-family : fixed;
  font-size   : 11px;
  color       : #4b4b4b;
}
.logBox {
  background-color : #ffffee;
  border           : 1px solid #8b8b8b;
  font-size        : 8pt;
}
.customDraggable {
  background-color : #E0DDB5;
  color            : #5b5b5b;
  border           : 1px solid #5b5b5b;
 /*  filter           : alpha(Opacity=70); */
  -moz-opacity     : 0.7;
  padding          : 1px 5px 1px 5px;
  font-size    : 11px;
}
.listBox {
  padding-top      : 5px;
  padding-bottom   : 5px;
  background-color : #ffffff;
  border           : 1px solid #8b8b8b;
}
.listBox * {
  margin: 0px;
  padding: 0px;
  font-size    : 11px;
  font-family  : Verdana, Arial, Helvetica;
}
.catHeader {
  font-family : Arial;
  font-weight : bold;
  font-size   : 11px;
  color       : #5b5b5b;
  margin-left : 8px;
  margin-top  : 12px;
  margin-bottom: 0px;
  display     : block;
}
.codeBox {
  padding-top      : 5px;
  padding-bottom   : 5px;
  background-color : #E0DDB5;
}
input {
  margin-left: 2em;
}
</style>
</head>

<body>
<h1 style="float:left;">Rico Drag &amp; Drop with Custom Drag Class</h1>
<form method="get" action="">
<p style="font-size:9pt;clear:both;">Select drag-and-drop options:
<br>
<input type="checkbox" name="removeOnDrop" id="removeOnDrop" value="Y"> <label for="removeOnDrop">Remove On Drop</label>
<input type="checkbox" name="reverseNamesOnDrop" id="reverseNamesOnDrop" value="Y"> <label for="reverseNamesOnDrop">Reverse Names On Drop</label>
</p>
</form>
<p class="catHeader">the example</p>
<div id="exampleContainer" style="width:540px;background-color:#E0DDB5;padding-bottom:8px;">
<div id="dragBox" style="display:inline;margin-left:8px;margin-bottom:8px;float:left;">
   <span class="catHeader">availalble name-list</span>
   <div class="listBox" id="nameList" style="width:250px;height:140px;overflow:auto;"></div>
</div>
<div id="dropBox" style="margin-left:8px;margin-bottom:8px;float:left">
   <span class="catHeader">dropped name-list</span>
   <div class="listBox" id="dropZone" style="width:250px;height:140px;overflow:auto;">
   </div>
</div>
<div style="clear:both;margin-left:8px;">
   <span id="loghead" class="catHeader">drag-n-drop message log:</span>
   <textarea class="logBox" id="logger" rows="8" cols="60"></textarea>
</div>
</div>
<p class="catHeader">the code</p>
<div class="codeBox" style="width:540px;height:250px;overflow:auto;">
<pre><span class="code">var CustomDraggable = Class.create();
CustomDraggable.prototype = (new Rico.Draggable()).extend( {
   <b>initialize</b>: function( htmlElement, name ) {
      this.type        = "Custom";
      this.htmlElement = $(htmlElement);
      this.name        = name;
   },
   <b>select</b>: function() {
      this.selected = true;
      var el = this.htmlElement;
      // show the item selected.....
      el.style.color           = "#ffffff";
      el.style.backgroundColor = "#08246b";
   },
   <b>deselect</b>: function() {
      this.selected = false;
      var el = this.htmlElement;
      el.style.color           = "#2b2b2b";
      el.style.backgroundColor = "transparent";
   },
   <b>startDrag</b>: function() {
      Rico.writeDebugMsg("startDrag: [" + this.name +"]");
   },
   <b>cancelDrag</b>: function() {
      Rico.writeDebugMsg("cancelDrag: [" + this.name +"]");
   },
   <b>endDrag</b>: function() {
      Rico.writeDebugMsg("endDrag: [" + this.name +"]");
   },
   <b>getSingleObjectDragGUI</b>: function() {
      var div = document.createElement("div");
      div.className = "customDraggable";
      div.style.width = this.htmlElement.offsetWidth - 10;
      Element.insert(div,this.name);
      return div;
   },
   <b>getDroppedGUI</b>: function() {
      var div = document.createElement("div");
      var n=this.name
      if (CustomDraggable.reverseNamesOnDrop) {
        var names = n.split(",");
        n=names[1].substring(1) + " " + names[0];
      }
      Element.insert(div,"[" + n + "]");
      return div;
   }
} );</span></pre>
</div>
</body>
</html>

Rico Drag and Drop - with dynamically created drop zones

 
<!--
Apache License, Version 2.0
Revised from Rico 2.0  demo code.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Rico</title>
<script src="rico21/src/rico.js" type="text/javascript"></script>
<script type="text/javascript">
Rico.loadModule("Corner","DragAndDrop");
var dropCnt=1;
Rico.onLoad( function() {
   dndMgr.registerDraggable( new Rico.Draggable("test-rico-dnd","dragme") );
   dndMgr.registerDropZone( new Rico.Dropzone("droponme") );
});
function CreateDropZone() {
  var div = document.createElement("div");
  var title = document.createElement("div");
  div.className="simpleDropPanel";
  title.className="title";
  dropCnt++;
  title.innerHTML="Drop On Me #"+dropCnt;
  div.appendChild(title);
  var id="dropzone"+dropCnt
  div.id=id;
  Element.setStyle(div, {backgroundColor:"#c6c3de"});
  document.body.appendChild(div);
  dndMgr.registerDropZone( new Rico.Dropzone(id) );
}
</script>
<style type="text/css">
body, p {
  font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
}
h1 { font-size: 16pt; }
div.title {
   font-family      : Arial;
   font-size        : 10px;
   background-color : #797979;
   color            : #ffffff;
   width            : 200px;
   margin           : 1px;
}
div.box {
   font-family   : Arial;
   font-size     : 14px;
   width         : 100px;
   height        : 40px;
   text-align    : center;
   border-bottom : 1px solid #6b6b6b;
   border-right  : 1px solid #6b6b6b;
}
div.panel {
   width    : 200px;
   height   : 80px;
   padding  : 2px;
   border   : 1px solid #5b5b5b;
}
div.simpleDropPanel {
   width    : 200px;
   height   : 80px;
   padding  : 2px;
   border   : 1px solid #5b5b5b;
   margin-top: 3px;
}
</style>
</head>

<body>
<h1 style="float:left;">Rico Drag &amp; Drop - with dynamically created drop zones</h1>
<p style="clear:both;"><button onclick="CreateDropZone()">Create Drop Zone</button></p>
<div style="padding:5px;border:1px solid #5b5b5b;height:50px;">
  <div class="box" style="background:#f7a673" id="dragme">Drag Me</div>
</div>
<div id="droponme" class="simpleDropPanel" style="background:#ffd773">
  <div class="title">Drop On Me</div>
</div>
</body>
</html>

Rico Simple Drag and Drop Example

 
<!--
Apache License, Version 2.0
Revised from Rico 2.0  demo code.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Rico</title>
<script src="rico21/src/rico.js" type="text/javascript"></script>
<script type="text/javascript">
Rico.loadModule("Corner","DragAndDrop");
Rico.onLoad( function() {
   Rico.Corner.round("explanation");
   dndMgr.registerDraggable( new Rico.Draggable("test-rico-dnd","dragme") );
   dndMgr.registerDropZone( new Rico.Dropzone("droponme") );
   dndMgr.registerDropZone( new Rico.Dropzone("droponme2") );
});
</script>
<style type="text/css">
body, p {
  font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
}
h1 { font-size: 16pt; }
div.title {
   font-family      : Arial;
   font-size        : 10px;
   background-color : #797979;
   color            : #ffffff;
   width            : 200px;
   margin           : 1px;
}
div.box {
   font-family   : Arial;
   font-size     : 14px;
   width         : 100px;
   height        : 40px;
   text-align    : center;
   border-bottom : 1px solid #6b6b6b;
   border-right  : 1px solid #6b6b6b;
}
div.panel {
   width    : 200px;
   height   : 80px;
   padding  : 2px;
   border   : 1px solid #5b5b5b;
}
div.explanation {
   font-family      : Arial;
   font-size        : 12px;
   width            : 600px;
   background-color : #cdd7b5;
}
div.simpleDropPanel {
   width    : 200px;
   height   : 80px;
   padding  : 2px;
   border   : 1px solid #5b5b5b;
}
</style>
</head>

<body>
<h1 style="float:left;">Rico Simple Drag &amp; Drop Example</h1>
<div style="padding:5px;border:1px solid #5b5b5b;height:50px;clear:both;">
<div class="box" style="background:#f7a673" id="dragme">Drag Me</div>
</div>
<p><table style="margin-bottom:8px" cellspacing="3" cellpadding="3">
<tr>
   <td>
      <div id="droponme" class="simpleDropPanel" style="background:#ffd773">
         <div class="title">Drop On Me</div>
      </div>
    </td>
    <td>
      <div id="droponme2" class="simpleDropPanel" style="background:#c6c3de">
         <div class="title">Drop On Me 2</div>
      </div>
   </td>
</tr>
</table>
<div id="explanation" class="explanation">
   <pre>
   &lt;div class="box" style="background:#f7a673" id="dragme"&gt;
      Drag Me
   &lt;/div&gt;
   &lt;div style="margin-bottom:8px;"&gt;
      &lt;div id="droponme" class="panel" style="display:inline;background:#ffd773"&gt;
         &lt;div class="title">Drop On Me&lt;/div>
      &lt;/div&gt;
      &lt;span&gt;&nbsp;&lt;/span&gt;
                  
      &lt;div id="droponme2" class="panel" style="display:inline;background:#c6c3de"&gt;
         &lt;div class="title"&gt;Drop On Me 2&lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt;
   &lt;script&gt;
      dndMgr.registerDraggable( new Rico.Draggable("test-rico-dnd","dragme") );
      dndMgr.registerDropZone( new Rico.Dropzone("droponme") );
      dndMgr.registerDropZone( new Rico.Dropzone("droponme2") );
   &lt;/script&gt;</pre>
</div>
</body>
</html>

Track drop-and-drop objects as they are moved by the user

 
<!--
Apache License, Version 2.0
Revised from Rico 2.0  demo code.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Rico TV Networks</title>
<script src="rico21/src/rico.js" type="text/javascript"></script>
<script type="text/javascript">
Rico.loadModule("DragAndDrop");
var names = [ "CNN", "ZDF", "BBC", "MTV", "CNBC", "NHK" ];
var CustomDraggable;
Rico.onLoad( function() {
  Rico.setDebugArea("logger");
  CustomDraggable = Class.create();
  CustomDraggable.prototype = Object.extend(new Rico.Draggable(), CustomDraggableMethods);
  var n=$("nameList");
  for ( var i=0; i < names.length; i++ ) {
    var d=document.createElement("div");
    d.id="d" + i;
    d.className="CustomDraggable";
    d.innerHTML=names[i];
    n.appendChild(d);
    dndMgr.registerDraggable( new CustomDraggable("Custom", d) );
  }
  dndMgr.registerDropZone( new Rico.Dropzone("dropZone1"));
  dndMgr.registerDropZone( new Rico.Dropzone("dropZone2"));
  dndMgr.registerDropZone( new Rico.Dropzone("nameListDeleted"));
});

var CustomDraggableMethods = {
  startDrag: function() {
    this.startParent=this.htmlElement.parentNode;
    Rico.writeDebugMsg("startDragging: " + this.htmlElement.innerHTML + " from [" + this.startParent.id +"]");
  },
  
  endDrag: function() {
    this.endParent=this.htmlElement.parentNode;
    Rico.writeDebugMsg("endDragging: " + this.htmlElement.innerHTML + " from [" + this.startParent.id + "] to [" + this.endParent.id + "]" );
  }
}
</script>
<style type="text/css">
body, p {
  font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
}
h1 { font-size: 16pt; }
.logBox {
  background-color : #ffffee;
  border : 1px solid #8b8b8b;
  font-size : 8pt;
}
.listBox {
  padding: 5px;
  background-color : #ffffff;
  border : 1px solid #8b8b8b;
  width:200px;
  height:100px;
  overflow:auto;
}
.listBox * {
  margin: 0px;
  padding: 0px;
  font-size : 11px;
  font-family : Arial, Helvetica;
}
span.catHeader {
  font-family : Arial;
  font-weight : bold;
  font-size : 11px;
  color : #5b5b5b;
  margin-left : 8px;
  margin-top : 12px;
  display : block;
}
.zone {
  display:inline;
  margin-left:8px;
  margin-bottom:8px;
  float:left;
}
div.CustomDraggable {
  z-index:10;
  color: blue;
}
</style>
</head>

<body>
<h1>Rico Drag-and-Drop: TV Networks</h1>
<p>This example demonstrates how to track drop-and-drop objects as they are moved by the user. Watch the log messages!</p>
<div id="exampleContainer" style="float:left;background-color:#DDD;">
<div>
<div id="dragBox" class="zone">
  <span class="catHeader">Channels</span>
  <div class="listBox" id="nameList"></div>
</div>
<div id="deleteZone" class="zone">
  <span class="catHeader">Delete zone</span>
  <div class="listBox" id="nameListDeleted"></div>
</div>
</div>
<div style="clear:both">
<div id="dropBox1" class="zone">
  <span class="catHeader">Drop1</span>
  <div class="listBox" id="dropZone1"></div>
</div>
<div id="dropBox2" class="zone">
  <span class="catHeader">Drop2</span>
  <div class="listBox" id="dropZone2"></div>
</div>
</div>
<div style="clear:both;margin:8px;">
  <span id="loghead" class="catHeader">drag-n-drop message log:</span>
  <textarea class="logBox" id="logger" rows="8" cols="80"></textarea>
</div>
</div>
</body>
</html>

JavaScript DHTML/Rico/Drag Drop — различия между версиями

Текущая версия на 07:26, 26 мая 2010

Содержание

Rico Drag-and-Drop: LiveGrids

Rico Drag and Drop with Custom Drag Class

Rico Drag and Drop - with dynamically created drop zones

Rico Simple Drag and Drop Example

Track drop-and-drop objects as they are moved by the user

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты

Текущая версия на 07:26, 26 мая 2010 (просмотреть исходный код) Admin (обсуждение \| вклад) м (1 версия)	Текущая версия на 07:26, 26 мая 2010 (просмотреть исходный код) Admin (обсуждение \| вклад) м (1 версия)
(нет различий)