Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

added reordering effect, adapted drag/drop

  • Loading branch information...
commit e900fb57c162596799a365464e341959add98d49 1 parent ab0a71f
Philipp Markovics authored June 23, 2009
8  javascripts/dragdrop.js
@@ -34,7 +34,8 @@ var Draggable = Class.create({
34 34
   release: function(event) {
35 35
     this.delta = null;
36 36
     Draggable.active = null;
37  
-    this.options.onDrop();
  37
+    this.element.style.zIndex = this.originalzIndex;
  38
+    this.options.onDrop(event, this.element);
38 39
   },
39 40
   
40 41
   onDrag: function(event) {
@@ -51,8 +52,9 @@ var Draggable = Class.create({
51 52
     }
52 53
     this.element.style.left = left + 'px';
53 54
     this.element.style.top = top + 'px';
54  
-
55  
-    this.options.onDrag();
  55
+    this.originalzIndex = this.element.style.zIndex;
  56
+    this.element.style.zIndex = 10000;
  57
+    this.options.onDrag(event, this.element);
56 58
   }
57 59
 });
58 60
 
72  javascripts/exploder.js
@@ -15,33 +15,44 @@ var Exploder = {
15 15
         p = this.picture.cumulativeOffset(), offset = 15;
16 16
     (3).times(function(i) {
17 17
       (3).times(function(j) {
18  
-        var piece = new Element('div').setStyle({
  18
+        var piece = new Element('div', { className: 'piece' }).setStyle({
19 19
           width: w + 'px',
20 20
           height: h + 'px',
21 21
           position: 'absolute',
22  
-          left: p.left + i*w + 'px',
23  
-          top: p.top + j*h + 'px',
24  
-          backgroundPosition: '-' + i*w + 'px' + ' -' + j*h + 'px',
  22
+          left: p.left + j*w + 'px',
  23
+          top: p.top + i*h + 'px',
  24
+          backgroundPosition: '-' + j*w + 'px' + ' -' + i*h + 'px',
25 25
           backgroundImage: 'url(' + this.picture.src + ')',
26 26
           cursor: 'move'
27 27
         });
28  
-        var x = p.left + i*w + (i-1) * offset, y = p.top + j*h + (j-1) * offset;
  28
+        var x = p.left + j*w + (j-1) * offset, y = p.top + i*h + (i-1) * offset;
29 29
         this.positions.push({ left: x, top: y });
30 30
         this.pieces.push(piece);
31 31
         this.container.insert(piece);
32  
-        this.draggables.push(new Draggable(piece));
  32
+        this.draggables.push(new Draggable(piece, { 
  33
+          onDrag: this.onDrag.bind(this),
  34
+          onDrop: this.onDrop.bind(this)
  35
+        }));
33 36
       }, this);
34 37
     }, this);
35 38
     this.picture.setOpacity(0);
36 39
   },
37 40
 
38 41
   renderPositions: function(pieces, options) {
  42
+    options = Object.extend({ 
  43
+      omitElement: null,
  44
+      after: Prototype.emptyFunction,
  45
+      duration: .4
  46
+    }, options || {});
39 47
     var fx = pieces.map(function(piece, i) {
  48
+      if (options.omitElement == piece) {
  49
+        return null;
  50
+      }
40 51
       return new s2.fx.Morph(piece, {
41 52
         style: { left: this.positions[i].left + 'px', top: this.positions[i].top + 'px' }
42 53
       });
43  
-    }, this);
44  
-    this.fx = new s2.fx.Parallel(fx, options || { duration: .4 }).play();
  54
+    }, this).compact();
  55
+    this.fx = new s2.fx.Parallel(fx, options).play();
45 56
   },
46 57
 
47 58
   explode: function() {
@@ -51,7 +62,8 @@ var Exploder = {
51 62
   },
52 63
 
53 64
   shuffle: function() {
54  
-    this.renderPositions(this.pieces.shuffle());
  65
+    this.pieces = this.pieces.shuffle();
  66
+    this.renderPositions(this.pieces);
55 67
   },
56 68
 
57 69
   reset: function() {
@@ -59,6 +71,44 @@ var Exploder = {
59 71
       return;
60 72
     this.pieces.each(Element.remove);
61 73
     this.picture.setOpacity(1);
  74
+  },
  75
+  
  76
+  onDrag: function(event, draggable) {
  77
+    draggable.hide();
  78
+    var target = document.elementFromPoint(event.clientX, event.clientY);
  79
+    draggable.show();
  80
+
  81
+    if (!target.hasClassName('piece'))
  82
+      return;
  83
+
  84
+    this.reorderTo(target, draggable);
  85
+
  86
+    if (this.fx.state == 'running')
  87
+      this.fx.cancel();
  88
+
  89
+    this.renderPositions(this.pieces, { 
  90
+      omitElement: draggable,
  91
+      after: this.checkOrder.bind(this),
  92
+      duration: .2
  93
+    });  
  94
+  },  
  95
+  
  96
+  onDrop: function(event, draggable) {
  97
+    this.renderPositions(this.pieces);
  98
+  },
  99
+  
  100
+  reorderTo: function(target, draggable) {
  101
+    var sourceIndex = this.pieces.indexOf(draggable);
  102
+    this.pieces.splice(sourceIndex, 1);
  103
+
  104
+    var targetIndex = this.pieces.indexOf(target);
  105
+
  106
+    if (targetIndex >= sourceIndex) targetIndex++;
  107
+    this.pieces.splice(targetIndex, 0, draggable);
  108
+  },
  109
+  
  110
+  checkOrder: function() {
  111
+    
62 112
   }
63 113
 };
64 114
 
@@ -70,4 +120,6 @@ Object.extend(s2.fx.Transitions, {
70 120
 
71 121
 Array.prototype.shuffle = function(){
72 122
   return this.sortBy(Math.random);
73  
-};
  123
+};
  124
+
  125
+document.ondragstart = function() { return false; };
4  stylesheets/exploder.css
@@ -23,4 +23,6 @@ body {
23 23
 
24 24
 #play:active {
25 25
   background:#000;
26  
-}
  26
+}
  27
+
  28
+.marked { border:3px solid #0f0; }

0 notes on commit e900fb5

Please sign in to comment.
Something went wrong with that request. Please try again.