Skip to content

Commit

Permalink
Fix build issue. Fix master branch reference
Browse files Browse the repository at this point in the history
  • Loading branch information
@Craga89
Craga89 committed Jul 6, 2014
1 parent 125314e commit d4a4eb3
Show file tree
Hide file tree
Showing 3 changed files with 4 additions and 72 deletions.
2 changes: 1 addition & 1 deletion gulpfile.js
View file
Expand Up @@ -31,7 +31,7 @@ gulp.task('connect', function() {

gulp.task('site', ['connect'], function() {
gulp.watch('site/**/*.md', ['markdown', 'jade']);
gulp.watch('site/**/*.jade', ['jade']);
gulp.watch('site/**/*.jade', ['markdown', 'jade']);
gulp.watch('site/**/*.css').on('change', connect.reload);
gulp.watch('site/**/*.js').on('change', connect.reload);
});
72 changes: 2 additions & 70 deletions index.html
View file
Expand Up @@ -19,81 +19,13 @@ <h1 class="header">ui.draggable.
</h1>
<p class="header">Adds <em>exclusivity</em> support to jQuery UI's `draggable` component</p>
<ul>
<li class="download"><a href="https://github.com/Craga89/ui.draggable.exclusive/zipball/master" class="buttons">Download ZIP</a></li>
<li class="download"><a href="https://github.com/Craga89/ui.draggable.exclusive/zipball/gh-pages" class="buttons">Download ZIP</a></li>
<li class="bower"><a href="http://bower.io/search/?q=ui.draggable.exclusive" class="buttons">Bower package</a></li>
<li><a href="https://github.com/Craga89/ui.draggable.exclusive" class="buttons github">View On GitHub</a></li>
</ul>
<p class="header">This project is maintained by <a href="https://github.com/Craga89" class="header name">Craga89</a></p>
</header>
<section id="content"><p><a name="why"></a></p>
<h2 id="what-">What?</h2>
<p>By default, <code>draggable</code> components will cause a <code>drop</code> event on all <code>droppable</code>s that it overlaps when the drag operation ends (i.e. you release your mouse).
There&#39;s <em>no built-in way</em> of ensuring <strong>only one <code>droppable</code> has its <code>drop</code> event fired</strong>. This plugin adds a new <code>exlusive</code> config option to allow this.</p>
<p><a name="why"></a></p>
<h2 id="why-">Why?</h2>
<p>We needed a way of ensuring <strong>exclusivity</strong> of our draggables i.e. <em>only one drop event per drag operation please!</em> And since this isn&#39;t a native feature,
we figured out a way and made this <code>ui.draggable.exclusive</code> plugin!</p>
<p><a name="demo"></a></p>
<h2 id="demo">Demo</h2>
<iframe width="100%" height="375" src="http://jsfiddle.net/craga89/68bUg/embedded/result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

<p><a name="how"></a></p>
<h2 id="how-">How?</h2>
<p>Simply include the <code>jquery-ui.draggable.exclusive.js</code> plugin <em>straight after the <code>jquery-ui.js</code> file</em>, and add an <code>exclusive: true</code> config option to your draggables. Bosh!</p>
<pre><code class="lang-html">&lt;html&gt;
&lt;head&gt;
&lt;title&gt;My awesome exclusive draggables&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;draggable&quot;&gt;&lt;/div&gt;

&lt;script src=&quot;/path/to/jquery-1.10.2.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;/path/to/jquery-ui-1.11.0.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;/path/to/jquery-ui.draggable.exclusive.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
$(&#39;.draggable&#39;).draggable({
exclusive: true // Make it exclusive!
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p><a name="who"></a></p>
<h2 id="who-">Who?</h2>
<p><a href="http://github.com/Craga89">I implemented it</a>, and my friend and colleague <a href="https://twitter.com/EasyInbox">Steve Henderson</a> came up with the concept behind it.
Big props to him, it&#39;s an awesome algorithm (I hope you&#39;ll agree...)!</p>
<p><a name="options"></a></p>
<h2 id="options">Options</h2>
<h3 id="exclusive-default-false-">exclusive <code>[default: false]</code></h3>
<p>Turns the exclusivity of this particular <code>draggable</code> instance on. <strong>Required for the other options to take effect</strong>.</p>
<h3 id="mousethreshold-default-5px-">mouseThreshold <code>[default: 5px]</code></h3>
<p>Number of pixels the mouse must move in any axis to cause a recalculation of mouse direction.</p>
<h3 id="directionratio-default-7-">directionRatio <code>[default: 7]</code></h3>
<p>Amount of comparable axis movement needed in order to consider the movement of the mouse a majority &quot;n-axis&quot; operation i.e.
moving the mouse x times more in one axis than in another.</p>
<p>This is used to prevent long tracking movements in one direction changing the value of another, hence preventing momentary retargetting
of the draggable to other droppables</p>
<h3 id="quadrantarea-default-0-6-">quadrantArea <code>[default: 0.6]</code></h3>
<p>Ratio of the <code>draggable</code>s area to use when calculating an inner quadrant area. <strong>Default is <code>60%</code> of the <code>draggable</code> area.</strong></p>
<h3 id="wideratio-default-3-5-">wideRatio <code>[default: 3.5]</code></h3>
<p>Ratio of <code>width / height</code> that needs to be satisfied for a shape to be considered &quot;wide&quot;</p>
<h3 id="longratio-default-3-5-">longRatio <code>[default: 3.5]</code></h3>
<p>Ratio of <code>height / width</code> that needs to be satisfied for a shape to be considered &quot;long&quot;</p>
<p><br />
<a name="faq"></a></p>
<h2 id="faq">FAQ</h2>
<h3 id="1-how-did-you-magic-">1. How did you... magic!?</h3>
<p>Using dragagble sub-division, mouse direction tracking and point distance calculations... it&#39;s cool.
<a href="http://blog.craigsworks.com/jquery-ui-draggable-exclusive-draggables">Read the blog article</a> for the deets.</p>
<h3 id="2-isn-t-this-in-the-ui-draggable-component-already-">2. Isn&#39;t this in the <code>ui.draggable</code> component already?</h3>
<p>No. There is a <code>greedy</code> option, but that only effects nested droppables, <em>not droppables close to one another</em>.</p>
<h3 id="3-what-versions-of-jquery-jquery-ui-is-this-compatible-with-">3. What versions of jQuery / jQuery UI is this compatible with?</h3>
<p>Requires jQuery <code>1.6.4+</code> and jQuery UI <code>1.9.0+</code>.</p>
<h3 id="4-i-m-having-problems-with-long-wide-elements-">4. I&#39;m having problems with long/wide elements?</h3>
<p>Play around with the <code>wideRatio</code> and <code>longRatio</code> options to find what works best for you.</p>
<h3 id="5-x-isn-t-working-">5. X isn&#39;t working...</h3>
<p>Found a bug? OR something isn&#39;t working? Report it on the <a href="https://github.com/Craga89/ui.draggable.exclusive/issues">bug tracker</a></p>

<section id="content">
</section>
<footer>
<p><small>Hosted on <a href="http://pages.github.com">GitHub Pages</a> using the Dinky theme</small></p>
Expand Down
2 changes: 1 addition & 1 deletion site/index.jade
View file
Expand Up @@ -20,7 +20,7 @@ html
p.header Adds <em>exclusivity</em> support to jQuery UI's `draggable` component
ul
li.download
a.buttons(href='https://github.com/Craga89/ui.draggable.exclusive/zipball/master') Download ZIP
a.buttons(href='https://github.com/Craga89/ui.draggable.exclusive/zipball/gh-pages') Download ZIP
li.bower
a.buttons(href='http://bower.io/search/?q=ui.draggable.exclusive') Bower package
li
Expand Down

0 comments on commit d4a4eb3

Please sign in to comment.