Permalink
Browse files

Adding touch support, dropping live support

  • Loading branch information...
1 parent 9d0c7c6 commit b0bafd0226706ec5156925ebf3af6a8d0aedb8a1 Michael Helgeson committed Jan 18, 2011
Showing with 67 additions and 65 deletions.
  1. +67 −65 event.drag/jquery.event.drag.js
View
132 event.drag/jquery.event.drag.js 100644 → 100755
@@ -1,10 +1,10 @@
/*!
- * jquery.event.drag - v 2.0.0
+ * jquery.event.drag - v 2.1.0
* Copyright (c) 2010 Three Dub Media - http://threedubmedia.com
* Open Source MIT License - http://threedubmedia.com/code/license
*/
// Created: 2008-06-04
-// Updated: 2010-06-07
+// Updated: 2010-09-15
// REQUIRES: jquery 1.4.2+
;(function( $ ){
@@ -43,10 +43,7 @@ drag = $special.drag = {
// the key name for stored drag data
datakey: "dragdata",
-
- // the namespace for internal live events
- livekey: "livedrag",
-
+
// count bound related events
add: function( obj ){
// read the interaction data
@@ -55,11 +52,6 @@ drag = $special.drag = {
opts = obj.data || {};
// count another realted event
data.related += 1;
- // bind the live "draginit" delegator
- if ( !data.live && obj.selector ){
- data.live = true;
- $event.add( this, "draginit."+ drag.livekey, drag.delegate );
- }
// extend data options bound with this event
// don't iterate "opts" in case it is a node
$.each( drag.defaults, function( key, def ){
@@ -83,7 +75,7 @@ drag = $special.drag = {
// store the interaction data
$.data( this, drag.datakey, data );
// bind the mousedown event, which starts drag interactions
- $event.add( this, "mousedown", drag.init, data );
+ $event.add( this, "touchstart mousedown", drag.init, data );
// prevent image dragging in IE...
if ( this.attachEvent )
this.attachEvent("ondragstart", drag.dontstart );
@@ -97,9 +89,7 @@ drag = $special.drag = {
// remove the stored data
$.removeData( this, drag.datakey );
// remove the mousedown event
- $event.remove( this, "mousedown", drag.init );
- // remove the "live" delegation
- $event.remove( this, "draginit", drag.delegate );
+ $event.remove( this, "touchstart mousedown", drag.init );
// enable text selection
drag.textselect( true );
// un-prevent image dragging in IE...
@@ -108,20 +98,29 @@ drag = $special.drag = {
},
// initialize the interaction
- init: function( event ){
+ init: function( event ){
+ // sorry, only one touch at a time
+ if ( drag.touched )
+ return;
// the drag/drop interaction data
var dd = event.data, results;
// check the which directive
- if ( dd.which > 0 && event.which != dd.which )
+ if ( event.which != 0 && dd.which > 0 && event.which != dd.which )
return;
// check for suppressed selector
if ( $( event.target ).is( dd.not ) )
return;
// check for handle selector
if ( dd.handle && !$( event.target ).closest( dd.handle, event.currentTarget ).length )
return;
+
// store/reset some initial attributes
+ if ( event.type == "touchstart" ){
+ drag.touched = this;
+ drag.touchFix( event, dd );
+ }
dd.propagates = 1;
+ dd.mousedown = this;
dd.interactions = [ drag.interaction( this, dd ) ];
dd.target = event.target;
dd.pageX = event.pageX;
@@ -149,27 +148,49 @@ drag = $special.drag = {
// disable text selection
drag.textselect( false );
// bind additional events...
- $event.add( document, "mousemove mouseup", drag.handler, dd );
- // helps prevent text selection
- return false;
+ if ( drag.touched )
+ $event.add( drag.touched, "touchmove touchend", drag.handler, dd );
+ else
+ $event.add( document, "mousemove mouseup", drag.handler, dd );
+ // helps prevent text selection or scrolling
+ if ( !drag.touched || dd.live )
+ return false;
},
+
+ // fix event properties for touch events
+ touchFix: function( event, dd ){
+ var orig = event.originalEvent, i = 0;
+ // iOS webkit: touchstart, touchmove, touchend
+ if ( orig && orig.changedTouches ){
+ event.pageX = orig.changedTouches[0].pageX;
+ event.pageY = orig.changedTouches[0].pageY;
+ }
+ //console.log( event.type, event );
+ },
+
// returns an interaction object
interaction: function( elem, dd ){
+ var offset = $( elem )[ dd.relative ? "position" : "offset" ]() || { top:0, left:0 };
return {
drag: elem,
callback: new drag.callback(),
droppable: [],
- offset: $( elem )[ dd.relative ? "position" : "offset" ]() || { top:0, left:0 }
+ offset: offset
};
},
+
// handle drag-releatd DOM events
handler: function( event ){
// read the data before hijacking anything
var dd = event.data;
+ if ( drag.touched )
+ drag.touchFix( event, dd );
// handle various events
switch ( event.type ){
// mousemove, check distance, start dragging
- case !dd.dragging && 'mousemove':
+ case !dd.dragging && 'touchmove':
+ event.preventDefault();
+ case !dd.dragging && 'mousemove':
// drag tolerance, x² + y² = distance²
if ( Math.pow( event.pageX-dd.pageX, 2 ) + Math.pow( event.pageY-dd.pageY, 2 ) < Math.pow( dd.distance, 2 ) )
break; // distance tolerance not reached
@@ -178,71 +199,42 @@ drag = $special.drag = {
if ( dd.propagates ) // "dragstart" not rejected
dd.dragging = true; // activate interaction
// mousemove, dragging
- case 'mousemove':
+ case 'touchmove':
+ event.preventDefault();
+ case 'mousemove':
if ( dd.dragging ){
// trigger "drag"
drag.hijack( event, "drag", dd );
if ( dd.propagates ){
// manage drop events
if ( dd.drop !== false && $special.drop )
- $special.drop.handler( event, dd ); // "dropstart", "dropend"
+ $special.drop.handler( event, dd ); // "dropstart", "dropend"
break; // "drag" not rejected, stop
}
event.type = "mouseup"; // helps "drop" handler behave
}
// mouseup, stop dragging
+ case 'touchend':
case 'mouseup':
- $event.remove( document, "mousemove mouseup", drag.handler ); // remove page events
+ if ( drag.touched )
+ $event.remove( drag.touched, "touchmove touchend", drag.handler ); // remove touch events
+ else
+ $event.remove( document, "mousemove mouseup", drag.handler ); // remove page events
if ( dd.dragging ){
if ( dd.drop !== false && $special.drop )
$special.drop.handler( event, dd ); // "drop"
drag.hijack( event, "dragend", dd ); // trigger "dragend"
}
drag.textselect( true ); // enable text selection
-
// if suppressing click events...
if ( dd.click === false && dd.dragging ){
- jQuery.event.triggered = true;
- setTimeout(function(){
- jQuery.event.triggered = false;
- }, 20 );
- dd.dragging = false; // deactivate element
+ $.data( dd.mousedown, "suppress.click", new Date().getTime() + 5 );
}
+ dd.dragging = drag.touched = false; // deactivate element
break;
}
},
-
- // identify potential delegate elements
- delegate: function( event ){
- // local refs
- var elems = [], target,
- // element event structure
- events = $.data( this, "events" ) || {};
- // query live events
- $.each( events.live || [], function( i, obj ){
- // no event type matches
- if ( obj.preType.indexOf("drag") !== 0 )
- return;
- // locate the element to delegate
- target = $( event.target ).closest( obj.selector, event.currentTarget )[0];
- // no element found
- if ( !target )
- return;
- // add an event handler
- $event.add( target, obj.origType+'.'+drag.livekey, obj.origHandler, obj.data );
- // remember new elements
- if ( $.inArray( target, elems ) < 0 )
- elems.push( target );
- });
- // if there are no elements, break
- if ( !elems.length )
- return false;
- // return the matched results, and clenup when complete
- return $( elems ).bind("dragend."+ drag.livekey, function(){
- $event.remove( this, "."+ drag.livekey ); // cleanup delegation
- });
- },
-
+
// re-use event object for custom events
hijack: function( event, type, dd, x, elem ){
// not configured
@@ -333,8 +325,8 @@ drag = $special.drag = {
obj.originalX = ia.offset.left;
obj.originalY = ia.offset.top;
// adjusted element position
- obj.offsetX = event.pageX - ( dd.pageX - obj.originalX );
- obj.offsetY = event.pageY - ( dd.pageY - obj.originalY );
+ obj.offsetX = obj.originalX + obj.deltaX;
+ obj.offsetY = obj.originalY + obj.deltaY;
// assign the drop targets information
obj.drop = drag.flatten( ( ia.drop || [] ).slice() );
obj.available = drag.flatten( ( ia.droppable || [] ).slice() );
@@ -382,6 +374,16 @@ drag.callback.prototype = {
}
};
+// patch $.event.handle to allow suppressing clicks
+var orighandle = $event.handle;
+$event.handle = function( event ){
+ if ( $.data( this, "suppress."+ event.type ) - new Date().getTime() > 0 ){
+ $.removeData( this, "suppress."+ event.type );
+ return;
+ }
+ return orighandle.apply( this, arguments );
+};
+
// share the same special event configuration with related events...
$special.draginit = $special.dragstart = $special.dragend = drag;

0 comments on commit b0bafd0

Please sign in to comment.