[dev] [commits] Horde branch master updated. 02ac7465fee04eb6aa5be9dc772d93ce5519c0f2

[Jan Schneider]

Last try.

Jan.

-- 
Do you need professional PHP or Horde consulting?
http://horde.org/consulting/
-------------- next part --------------
<script src="js/prototype.js"></script>
<script src="js/dragdrop2.js"></script>
<style>
body {
  margin: 0;
  height: 100%;
}
.dragger {
  width: 50px;
  height: 50px;
  background-color: green;
}
#drag10 {
  position: absolute;
  bottom: 0;
}
#drag12 {
  position: absolute;
  left: 20px;
}
.parent {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: red;
}
.nooverflow {
  position:relative;
  overflow:hidden;
}
.drag {
  background-color: yellow;
}
#drop {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: grey;
  left: 500px;
  top: 200px;
}
#scroll {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: grey;
  left: 500px;
  top: 400px;
  overflow: auto;
}
#parent6, #parent9a, #parent11, #parent12 {
  position: relative;
  left: 50px;
}
#parent9b {
  position: absolute;
  top: 800px;
  left: 200px;
  width: 300px;
  height: 100px;
  z-index: -1;
  background-color: blue;
  filter: alpha(opacity=50);
  -moz-opacity: .5;
  opacity: .5;

}
#parent9b .dragger {
  z-index: 1;
}
</style>

<div id="drop"></div>
<div id="scroll"><div style="height:200px"></div></div>
<div id="parent9b"></div>

At bottom:
<div class="parent">
<div class="dragger" id="drag10"></div>
</div>

Basic dragging:
<div class="dragger" id="drag1"></div>

With offset:
<div class="dragger" id="drag7"></div>

Scrolling:
<div class="dragger" id="drag8"></div>

Ghosting:
<div class="dragger" id="drag2"></div>

Caption:
<div class="dragger" id="drag3"></div>

Outside parent:
<div class="parent">
<div class="dragger" id="drag4"></div>
</div>

Outside parent with hidden overflow:
<div class="parent nooverflow">
<div class="dragger" id="drag5"></div>
</div>

Inside parent:
<div class="parent" id="parent6">
<div class="dragger" id="drag6"></div>
</div>

Nested:
<div class="parent" id="parent9a">
<div class="dragger" id="drag9"></div>
</div>

Vertical constraint:
<div class="parent" id="parent11">
<div class="dragger" id="drag11"></div>
</div>

Nested and vertical constraint:
<div class="parent" id="parent12">
<div class="dragger" id="drag12"></div>
</div>

<script>
new Drag('drag1');
new Drag('drag2', { ghosting: true });
new Drag('drag3', { caption: 'Caption' });
new Drag('drag4');
new Drag('drag5', { parentElement: function() { return document.body; } });
new Drag('drag6', { snapToParent: true });
new Drag('drag7', { offset: { x: 10, y: 10 } });
new Drag('drag8', { scroll: $('scroll') });
new Drag('drag9', { parentElement: function() { return $('parent9b'); } });
new Drop('drop', { onDrop: function(d, e) { console.log('Dropped ' + e.identify()); } });
new Drop('scroll', { onDrop: function(d, e) { console.log('Dropped ' + e.identify()); } });
new Drag('drag10');
new Drag('drag11', { constraint: 'vertical' });
new Drag('drag12', { constraint: 'vertical', parentElement: function() { return $('parent9b'); } });
</script>