first commit

jnbdz · Apr 17, 2012 · c295e92 · c295e92
commit c295e92
Show file tree

Hide file tree

Showing 10 changed files with 900 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,9 @@
+*~
+*.swp
+
+# OS generated files #
+######################
+.DS_Store
+ehthumbs.db
+Icon
+Thumbs.db
diff --git a/Demos/assets/js/elCollide.js b/Demos/assets/js/elCollide.js
@@ -0,0 +1,31 @@
+/*
+---
+description: Detect if two elements are colliding.
+
+authors:
+  - Jean-Nicolas Boulay (http://jean-nicolas.com/)
+
+license:
+  - MIT-style license
+
+requires:
+ - core/1.4:   '*'
+
+provides:
+  - Element.elCollide
+...
+*/
+
+Element.implement({
+    elCollide: function(el2){
+        this.offsetBottom = this.offsetTop + this.offsetHeight;
+        this.offsetRight = this.offsetLeft + this.offsetWidth;
+        el2.offsetBottom = el2.offsetTop + el2.offsetHeight;
+        el2.offsetRight = el2.offsetLeft + el2.offsetWidth;
+
+        return !((this.offsetBottom < el2.offsetTop) ||
+                 (this.offsetTop > el2.offsetBottom) ||
+                 (this.offsetRight < el2.offsetLeft) ||
+                 (this.offsetLeft > el2.offsetRight));
+    }
+});
diff --git a/Demos/assets/js/mootools-core-1.4.5-full-nocompat-yc.js b/Demos/assets/js/mootools-core-1.4.5-full-nocompat-yc.js
diff --git a/Demos/assets/js/mootools-more-1.4.0.1.js b/Demos/assets/js/mootools-more-1.4.0.1.js
diff --git a/Demos/index.html b/Demos/index.html
@@ -0,0 +1,157 @@
+<!DOCTYPE HtMl>
+<html lang="en">
+<head>
+        <meta charset="UTF-8"/>
+        <title>Drag.Move.Collide | Demo</title>
+        <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+<style>
+/*	Resets
+	------	*/
+
+html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
+p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
+img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 
+dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
+table, caption, tbody, tfoot, thead, tr, th, td,
+acronym, applet, article, aside, canvas, details, figure, figcaption, hgroup, 
+big, dialog, embed, meter, output, progress, rp, rt, ruby, s, strike, tt, xmp,
+menu, footer, header, nav, section, summary, time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0 none;
+	font-size: 100%;
+}
+
+article, aside, details, menu, canvas, figure, figure img, figcaption, hgroup,
+footer, header, nav, section, audio, video {
+	display: block;
+}
+
+b,
+strong {
+/*
+  Makes browsers agree.
+  IE + Opera = font-weight: bold.
+  Gecko + WebKit = font-weight: bolder.
+*/
+  font-weight: bold;
+}
+
+img {
+  color: transparent;
+  font-size: 0;
+  vertical-align: middle;
+/*
+  For IE.
+  http://css-tricks.com/ie-fix-bicubic-scaling-for-images
+*/
+  -ms-interpolation-mode: bicubic;
+}
+
+body {
+    font-size: 100%;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+	-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
+}
+
+/****************/
+/*** Demo CSS ***/
+/****************/
+
+#main section>div {
+  background: #DDD;
+  height: 260px;
+  position: relative;
+  margin-top: 30px;
+}
+
+#main section {
+	margin-top: 25px;
+}
+
+#drag {
+  background: #78BA91;
+  cursor: move;
+  height: 40px;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 40px;
+}
+
+.drop {
+  background: #6B7B95;
+  float: left;
+  height: 60px;
+  margin-left: 20px;
+  margin-top: 20px;
+  width: 72px;
+}
+</style>
+</head>
+<body>
+<section id="main" role="main">
+    <section id="collision">
+        <header>
+            <h1>Drag.Move.Collide</h1>
+        </header>
+        <div>
+            <div id="drag"></div>
+            <div class="drop"></div>
+            <div class="drop"></div>
+            <div class="drop"></div>
+            <div class="drop"></div>
+            <div class="drop"></div>
+            <div class="drop"></div>
+            <div class="drop"></div>
+            <div class="drop"></div>
+            <div class="drop"></div>
+            <div class="drop"></div>
+            <div class="drop"></div>
+            <div class="drop"></div>
+            <div class="drop"></div>
+            <div class="drop"></div>
+            <div class="drop"></div>
+            <div class="drop"></div>
+            <div class="drop"></div>
+            <div class="drop"></div>
+            <div class="drop"></div>
+            <div class="drop"></div>
+            <div class="drop"></div>
+            <div class="drop"></div>
+            <div class="drop"></div>
+            <div class="drop"></div>
+        </div>
+    </section>
+</section>
+<script src="assets/js/mootools-core-1.4.5-full-nocompat-yc.js"></script>
+<script src="assets/js/mootools-more-1.4.0.1.js"></script>
+<script src="assets/js/elCollide.js"></script>
+<script src="../Source/Drag.Move.Collide.js"></script>
+<script>
+window.addEvent('domready', function(){
+
+    new Drag.Move.Collide(document.id('drag'), {
+
+        container: $$('#collision>div')[0],
+
+        droppables: $$('#collision .drop'),
+
+        onCollide: function(element, droppable){
+            droppable.setStyle('background', '#E79D35');
+        },
+
+        onLeaveCollision: function(element, droppable){
+            droppable.setStyle('background', '#6B7B95');
+        },
+
+        onDrop: function(element, droppable){
+            if (droppable) droppable.setStyle('background', '#C17878');
+        }
+
+    });
+
+});
+</script>
+</body>
+</html>
diff --git a/Docs/Drag.Move.Collide.md b/Docs/Drag.Move.Collide.md
@@ -0,0 +1,55 @@
+Class: Drag.Move.Collide
+=============================
+
+**Syntax**
+
+    var collide = new Drag.Move.Collide(el, [options]);
+
+**Implements**
+
+[Events](http://mootools.net/docs/core/Class/Class.Extras#Events), [Options](http://mootools.net/docs/core/Class/Class.Extras#Options)
+
+**Extends**
+
+[Drag.Move](http://mootools.net/docs/more/Drag/Drag.Move)
+
+**Arguments**
+
+1. el - (element) The Element to apply the drag to.
+2. options - (object, optional) The options object.
+
+**Options**
+
+All the base Drag and Drag.Move options, plus:
+
+* checkDroppables (boolean; defaults to false) Checks against the droppables on drag if true.
+* checkCollision (boolean; defaults to true) If true, the class will be detect collisions.
+
+**Events**
+
+All the base Drag and Drag.Move events, plus:
+
+* collide - Executed when the dragged element collides with the other elements.
+* leaveCollision - Executed when the element leaves the elements it had collided with.
+
+**Example**
+
+        new Drag.Move.Collide(document.id('drag'), {
+
+            container: $$('#collision>div')[0],
+
+            droppables: $$('#collision .drop'),
+
+            onCollide: function(element, droppable){
+                droppable.setStyle('background', '#E79D35');
+            },
+
+            onLeaveCollision: function(element, droppable){
+                droppable.setStyle('background', '#6B7B95');
+            },
+
+            onDrop: function(element, droppable){
+                if (droppable) droppable.setStyle('background', '#C17878');
+            }
+
+        });
diff --git a/README.md b/README.md
@@ -0,0 +1,31 @@
+elCollide
+===========
+
+The Drag.Move.Collide class makes it easy to detect when two or more elements collide when dragging an another element.
+
+![Screenshot](https://github.com/jnbdz/Drag.Move.Collide/raw/master/drag.move.collide.png)
+
+How to use
+----------
+
+Similar to Drag.Move. Drag.Move.Collide needs all the same informations.
+
+        new Drag.Move.Collide(document.id('drag'), {
+
+            container: $$('#collision>div')[0],
+
+            droppables: $$('#collision .drop'),
+
+            onCollide: function(element, droppable){
+                droppable.setStyle('background', '#E79D35');
+            },
+
+            onLeaveCollision: function(element, droppable){
+                droppable.setStyle('background', '#6B7B95');
+            },
+
+            onDrop: function(element, droppable){
+                if (droppable) droppable.setStyle('background', '#C17878');
+            }
+
+        });