Permalink
Browse files

added reordering effect, adapted drag/drop

  • Loading branch information...
1 parent ab0a71f commit e900fb57c162596799a365464e341959add98d49 @joe-loco committed Jun 23, 2009
Showing with 70 additions and 14 deletions.
  1. +5 −3 javascripts/dragdrop.js
  2. +62 −10 javascripts/exploder.js
  3. +3 −1 stylesheets/exploder.css
View
8 javascripts/dragdrop.js
@@ -34,7 +34,8 @@ var Draggable = Class.create({
release: function(event) {
this.delta = null;
Draggable.active = null;
- this.options.onDrop();
+ this.element.style.zIndex = this.originalzIndex;
+ this.options.onDrop(event, this.element);
},
onDrag: function(event) {
@@ -51,8 +52,9 @@ var Draggable = Class.create({
}
this.element.style.left = left + 'px';
this.element.style.top = top + 'px';
-
- this.options.onDrag();
+ this.originalzIndex = this.element.style.zIndex;
+ this.element.style.zIndex = 10000;
+ this.options.onDrag(event, this.element);
}
});
View
72 javascripts/exploder.js
@@ -15,33 +15,44 @@ var Exploder = {
p = this.picture.cumulativeOffset(), offset = 15;
(3).times(function(i) {
(3).times(function(j) {
- var piece = new Element('div').setStyle({
+ var piece = new Element('div', { className: 'piece' }).setStyle({
width: w + 'px',
height: h + 'px',
position: 'absolute',
- left: p.left + i*w + 'px',
- top: p.top + j*h + 'px',
- backgroundPosition: '-' + i*w + 'px' + ' -' + j*h + 'px',
+ left: p.left + j*w + 'px',
+ top: p.top + i*h + 'px',
+ backgroundPosition: '-' + j*w + 'px' + ' -' + i*h + 'px',
backgroundImage: 'url(' + this.picture.src + ')',
cursor: 'move'
});
- var x = p.left + i*w + (i-1) * offset, y = p.top + j*h + (j-1) * offset;
+ var x = p.left + j*w + (j-1) * offset, y = p.top + i*h + (i-1) * offset;
this.positions.push({ left: x, top: y });
this.pieces.push(piece);
this.container.insert(piece);
- this.draggables.push(new Draggable(piece));
+ this.draggables.push(new Draggable(piece, {
+ onDrag: this.onDrag.bind(this),
+ onDrop: this.onDrop.bind(this)
+ }));
}, this);
}, this);
this.picture.setOpacity(0);
},
renderPositions: function(pieces, options) {
+ options = Object.extend({
+ omitElement: null,
+ after: Prototype.emptyFunction,
+ duration: .4
+ }, options || {});
var fx = pieces.map(function(piece, i) {
+ if (options.omitElement == piece) {
+ return null;
+ }
return new s2.fx.Morph(piece, {
style: { left: this.positions[i].left + 'px', top: this.positions[i].top + 'px' }
});
- }, this);
- this.fx = new s2.fx.Parallel(fx, options || { duration: .4 }).play();
+ }, this).compact();
+ this.fx = new s2.fx.Parallel(fx, options).play();
},
explode: function() {
@@ -51,14 +62,53 @@ var Exploder = {
},
shuffle: function() {
- this.renderPositions(this.pieces.shuffle());
+ this.pieces = this.pieces.shuffle();
+ this.renderPositions(this.pieces);
},
reset: function() {
if (!this.pieces)
return;
this.pieces.each(Element.remove);
this.picture.setOpacity(1);
+ },
+
+ onDrag: function(event, draggable) {
+ draggable.hide();
+ var target = document.elementFromPoint(event.clientX, event.clientY);
+ draggable.show();
+
+ if (!target.hasClassName('piece'))
+ return;
+
+ this.reorderTo(target, draggable);
+
+ if (this.fx.state == 'running')
+ this.fx.cancel();
+
+ this.renderPositions(this.pieces, {
+ omitElement: draggable,
+ after: this.checkOrder.bind(this),
+ duration: .2
+ });
+ },
+
+ onDrop: function(event, draggable) {
+ this.renderPositions(this.pieces);
+ },
+
+ reorderTo: function(target, draggable) {
+ var sourceIndex = this.pieces.indexOf(draggable);
+ this.pieces.splice(sourceIndex, 1);
+
+ var targetIndex = this.pieces.indexOf(target);
+
+ if (targetIndex >= sourceIndex) targetIndex++;
+ this.pieces.splice(targetIndex, 0, draggable);
+ },
+
+ checkOrder: function() {
+
}
};
@@ -70,4 +120,6 @@ Object.extend(s2.fx.Transitions, {
Array.prototype.shuffle = function(){
return this.sortBy(Math.random);
-};
+};
+
+document.ondragstart = function() { return false; };
View
4 stylesheets/exploder.css
@@ -23,4 +23,6 @@ body {
#play:active {
background:#000;
-}
+}
+
+.marked { border:3px solid #0f0; }

0 comments on commit e900fb5

Please sign in to comment.