Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mobile Safari support #11

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Mobile Safari support #11

Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
22e037c
add class btf-dragon-dragging to allow custom styling of dragged element
tqc Aug 27, 2013
c437ea8
support mobile safari
tqc Aug 28, 2013
ec2e654
Start drag on move so that elements can be both draggable and clickable
tqc Aug 28, 2013
f0ec749
Turn strict mode back on
tqc Aug 29, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 52 additions & 19 deletions dragon-drop.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* License: MIT
*/

'use strict';
//'use strict';
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like this may have been accidentally commented out.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That probably should go back in - I removed it for testing because strict mode breaks the safari debugger.


angular.module('btford.dragon-drop', []).
directive('btfDragon', function ($document, $compile, $rootScope) {
Expand Down Expand Up @@ -39,19 +39,25 @@ angular.module('btford.dragon-drop', []).
var dragValue,
dragKey,
dragOrigin,
dragOriginElement,
dragDuplicate = false,
dragAwaitingMove = false,
floaty,
offsetX,
offsetY;

var drag = function (ev) {
var x = ev.clientX - offsetX,
y = ev.clientY - offsetY;
if (!floaty) return;
ev.preventDefault();
var x = (ev.clientX || ev.originalEvent.touches[0].clientX) - offsetX,
y = (ev.clientY || ev.originalEvent.touches[0].clientY) - offsetY;

floaty.css('left', x + 'px');
floaty.css('top', y + 'px');
};



var remove = function (collection, index) {
if (collection instanceof Array) {
return collection.splice(index, 1);
Expand Down Expand Up @@ -94,7 +100,7 @@ angular.module('btford.dragon-drop', []).

var killFloaty = function () {
if (floaty) {
$document.unbind('mousemove', drag);
$document.unbind('touchmove mousemove', drag);
floaty.remove();
floaty = null;
}
Expand Down Expand Up @@ -126,12 +132,13 @@ angular.module('btford.dragon-drop', []).
return element;
};

$document.bind('mouseup', function (ev) {
$document.bind('touchend mouseup', function (ev) {
dragAwaitingMove = false;
if (!dragValue) {
return;
}

var dropArea = getElementBehindPoint(floaty, ev.clientX, ev.clientY);
var dropArea = getElementBehindPoint(floaty, (ev.clientX || ev.originalEvent.changedTouches[0].clientX), (ev.clientY || ev.originalEvent.changedTouches[0].clientY));

var accepts = function () {
return dropArea.attr('btf-dragon') &&
Expand All @@ -143,20 +150,27 @@ angular.module('btford.dragon-drop', []).
dropArea = dropArea.parent();
}

dragOriginElement.css("display", "");
dragOriginElement.removeClass("btf-dragon-origin");
if (dropArea.length > 0) {
var expression = dropArea.attr('btf-dragon');
var targetScope = dropArea.scope();
var match = expression.match(/^\s*(.+)\s+in\s+(.*?)\s*$/);

var targetList = targetScope.$eval(match[2]);
targetScope.$apply(function () {

$rootScope.$apply(function () {
if (!dragDuplicate) {
remove(dragOrigin, dragKey || dragOrigin.indexOf(dragValue));
}
add(targetList, dragValue, dragKey);
});
} else if (!dragDuplicate) {
// no dropArea here
// put item back to origin
$rootScope.$apply(function () {
add(dragOrigin, dragValue, dragKey);
remove(dragOrigin, dragKey || dragOrigin.indexOf(dragValue));
add(dragOrigin, dragValue, dragKey);
});
}

Expand Down Expand Up @@ -221,24 +235,28 @@ angular.module('btford.dragon-drop', []).

floaty.css('margin', '0px');
floaty.css('z-index', '99999');

floaty.addClass("btf-dragon-dragging");
var floatyScope = scope.$new();
floatyScope[valueIdentifier] = dragValue;
if (keyIdentifier) {
floatyScope[keyIdentifier] = dragKey;
}
$compile(floaty)(floatyScope);
documentBody.append(floaty);
$document.bind('mousemove', drag);
$document.bind('touchmove mousemove', drag);
disableSelect();
});
};

elt.bind('mousedown', function (ev) {
var startDrag = function (ev) {
if (dragValue) {
return;
}
elt.unbind('touchmove mousemove', startDrag);

if (!dragAwaitingMove) {
return;
}
// find the right parent
var originElement = angular.element(ev.target);
var originScope = originElement.scope();
Expand All @@ -250,6 +268,11 @@ angular.module('btford.dragon-drop', []).
}
}

while (!$(originElement).parent().is("[btf-dragon]")) {
originElement = originElement.parent();
}
dragOriginElement = originElement;

dragValue = originScope[valueIdentifier];
dragKey = originScope[keyIdentifier];
if (!dragValue) {
Expand All @@ -262,20 +285,30 @@ angular.module('btford.dragon-drop', []).
dragOrigin = scope.$eval(rhs);
if (duplicate) {
dragValue = angular.copy(dragValue);
} else {
scope.$apply(function () {
remove(dragOrigin, dragKey || dragOrigin.indexOf(dragValue));
});
}
}
dragDuplicate = duplicate;

offsetX = (ev.pageX - offset.left);
offsetY = (ev.pageY - offset.top);
offsetX = ((ev.pageX || ev.originalEvent.touches[0].pageX) - offset.left);
offsetY = ((ev.pageY || ev.originalEvent.touches[0].pageY) - offset.top);

spawnFloaty();
drag(ev);
if (!duplicate) {
// hide the dragged element - we can't actually remove it because that would stop the touchmove events
originElement.css("display", "none");
originElement.addClass("btf-dragon-origin");
}
};

elt.bind('touchstart mousedown', function (ev) {
if (dragValue) {
return;
}
dragAwaitingMove = true;
elt.bind('touchmove mousemove', startDrag);

});
};
}
};
});
});