Skip to content

Fix touch support. #169

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

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
+7 −5
Open

Fix touch support. #169

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7e4c0f4
Fix touch support. In case we are dragging something clickable, preve…
taliastocks Mar 12, 2015
9bb7268
mousedown events should be cancelled, but touchstart events should not
taliastocks Mar 12, 2015
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
12 changes: 7 additions & 5 deletions source/js/jquery-sortable.js
View file
Original file line number Diff line number Diff line change
@@ -86,6 +86,7 @@
// The Placeholder has not been moved yet.
onDrag: function ($item, position, _super, event) {
$item.css(position)
event.preventDefault()
Copy link
Author

Choose a reason for hiding this comment

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

On mobile, this prevents the page from scrolling while dragging an object.

},
// Called after the drag has been started,
// that is the mouse button is beeing held down and
@@ -109,7 +110,7 @@
// Ignore if element clicked is input, select or textarea
onMousedown: function ($item, _super, event) {
if (!event.target.nodeName.match(/^(input|select|textarea)$/i)) {
event.preventDefault()
if (event.type.match(/^mouse/)) event.preventDefault()
Copy link
Author

Choose a reason for hiding this comment

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

If the event is a mouse event, it is still important to call event.preventDefault() to prevent text selection. Doing so does not interrupt click events if there is a click handler on the draggable object.

However, if the event is a touch event, we don't have to worry about text selection. We also must not call event.preventDefault(), since doing so will interrupt click events on the draggable object.

return true
}
},
@@ -254,7 +255,7 @@
this.item = closestItem;
this.itemContainer = itemContainer;
if (this.item.is(this.options.exclude) || !this.options.onMousedown(this.item, groupDefaults.onMousedown, e)) {
return;
return;
}
this.setPointer(e);
this.toggleListeners('on');
@@ -401,10 +402,11 @@
) >= this.options.distance)
},
getPointer: function(e) {
Copy link
Author

Choose a reason for hiding this comment

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

This line doesn't do what the author probably meant for it to do. Note that e.originalEvent is always truthy, so this line is equivalent to var o = e.originalEvent.

var o = e.originalEvent || e.originalEvent.touches && e.originalEvent.touches[0]
var o = e.originalEvent,
t = (e.originalEvent.touches && e.originalEvent.touches[0]) || {};
Copy link
Author

Choose a reason for hiding this comment

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

If e stands for "event" and o stands for "originalEvent", then t stands for "touch".

return {
left: e.pageX || o.pageX,
top: e.pageY || o.pageY
left: e.pageX || o.pageX || t.pageX,
top: e.pageY || o.pageY || t.pageY
Copy link
Author

Choose a reason for hiding this comment

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

Having both e and o here is probably redundant, but I did not know what bug may have initially led to this solution.

}
},
setupDelayTimer: function () {