L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-47494 ddmarker: Fix drag and drop on Android touch devices. #85111

Browse Source 
The original idea for this fix came from Davo Smith.
This commit is contained in:
M Kassaei
2015-06-16 18:20:40 +01:00
committed by Tim Hunt
parent 16f1bcee3d
commit e76deaac51
4 changed files with 116 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
question/type/ddmarker/yui/build/moodle-qtype_ddmarker-dd/moodle-qtype_ddmarker-dd-debug.js
Vendored
+38
View File
@@ -308,6 +308,7 @@ var DDMARKER_QUESTION = function() {
* This is the code for question rendering.
*/
Y.extend(DDMARKER_QUESTION, M.qtype_ddmarker.dd_base_class, {
touchscrolldisable: null,
pendingid: '',
initializer : function() {
this.pendingid = 'qtype_ddmarker-' + Math.random().toString(36).slice(2); // Random string.
@@ -334,6 +335,39 @@ Y.extend(DDMARKER_QUESTION, M.qtype_ddmarker.dd_base_class, {
}
return drag;
},
/**
* prevent_touchmove_from_scrolling allows users of touch screen devices to
* use drag and drop and normal scrolling at the same time. I.e.when
* touching and dragging a draggable item, the screen does not scroll, but
* you can scroll by touching other area of the screen apart from the
* draggable items.
*/
prevent_touchmove_from_scrolling : function(drag) {
var touchstart = (Y.UA.ie) ? 'MSPointerStart' : 'touchstart';
var touchend = (Y.UA.ie) ? 'MSPointerEnd' : 'touchend';
var touchmove = (Y.UA.ie) ? 'MSPointerMove' : 'touchmove';
// Disable scrolling when touching the draggable items.
drag.on(touchstart, function() {
if (this.touchscrolldisable) {
return; // Already disabled.
}
this.touchscrolldisable = Y.one('body').on(touchmove, function(e) {
e = e || window.event;
e.preventDefault();
});
}, this);
// Allow scrolling after releasing the draggable items.
drag.on(touchend, function() {
if (this.touchscrolldisable) {
this.touchscrolldisable.detach();
this.touchscrolldisable = null;
}
}, this);
},
draggable : function (drag) {
var dd = new Y.DD.Drag({
node: drag,
@@ -360,7 +394,11 @@ Y.extend(DDMARKER_QUESTION, M.qtype_ddmarker.dd_base_class, {
//--- keyboard accessibility
drag.set('tabIndex', 0);
drag.on('dragchange', this.drop_zone_key_press, this);
// Prevent scrolling whilst dragging on Adroid devices.
this.prevent_touchmove_from_scrolling(drag);
},
save_all_xy_for_choice: function (choiceno, dropped) {
var coords = [];
var bgimgxy;
question/type/ddmarker/yui/build/moodle-qtype_ddmarker-dd/moodle-qtype_ddmarker-dd-min.js
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
question/type/ddmarker/yui/build/moodle-qtype_ddmarker-dd/moodle-qtype_ddmarker-dd.js
Vendored
+38
View File
@@ -308,6 +308,7 @@ var DDMARKER_QUESTION = function() {
* This is the code for question rendering.
*/
Y.extend(DDMARKER_QUESTION, M.qtype_ddmarker.dd_base_class, {
touchscrolldisable: null,
pendingid: '',
initializer : function() {
this.pendingid = 'qtype_ddmarker-' + Math.random().toString(36).slice(2); // Random string.
@@ -334,6 +335,39 @@ Y.extend(DDMARKER_QUESTION, M.qtype_ddmarker.dd_base_class, {
}
return drag;
},
/**
* prevent_touchmove_from_scrolling allows users of touch screen devices to
* use drag and drop and normal scrolling at the same time. I.e.when
* touching and dragging a draggable item, the screen does not scroll, but
* you can scroll by touching other area of the screen apart from the
* draggable items.
*/
prevent_touchmove_from_scrolling : function(drag) {
var touchstart = (Y.UA.ie) ? 'MSPointerStart' : 'touchstart';
var touchend = (Y.UA.ie) ? 'MSPointerEnd' : 'touchend';
var touchmove = (Y.UA.ie) ? 'MSPointerMove' : 'touchmove';
// Disable scrolling when touching the draggable items.
drag.on(touchstart, function() {
if (this.touchscrolldisable) {
return; // Already disabled.
}
this.touchscrolldisable = Y.one('body').on(touchmove, function(e) {
e = e || window.event;
e.preventDefault();
});
}, this);
// Allow scrolling after releasing the draggable items.
drag.on(touchend, function() {
if (this.touchscrolldisable) {
this.touchscrolldisable.detach();
this.touchscrolldisable = null;
}
}, this);
},
draggable : function (drag) {
var dd = new Y.DD.Drag({
node: drag,
@@ -360,7 +394,11 @@ Y.extend(DDMARKER_QUESTION, M.qtype_ddmarker.dd_base_class, {
//--- keyboard accessibility
drag.set('tabIndex', 0);
drag.on('dragchange', this.drop_zone_key_press, this);
// Prevent scrolling whilst dragging on Adroid devices.
this.prevent_touchmove_from_scrolling(drag);
},
save_all_xy_for_choice: function (choiceno, dropped) {
var coords = [];
var bgimgxy;
question/type/ddmarker/yui/src/ddmarker/js/ddmarker.js
Vendored
+38
View File
@@ -306,6 +306,7 @@ var DDMARKER_QUESTION = function() {
* This is the code for question rendering.
*/
Y.extend(DDMARKER_QUESTION, M.qtype_ddmarker.dd_base_class, {
touchscrolldisable: null,
pendingid: '',
initializer : function() {
this.pendingid = 'qtype_ddmarker-' + Math.random().toString(36).slice(2); // Random string.
@@ -332,6 +333,39 @@ Y.extend(DDMARKER_QUESTION, M.qtype_ddmarker.dd_base_class, {
}
return drag;
},
/**
* prevent_touchmove_from_scrolling allows users of touch screen devices to
* use drag and drop and normal scrolling at the same time. I.e.when
* touching and dragging a draggable item, the screen does not scroll, but
* you can scroll by touching other area of the screen apart from the
* draggable items.
*/
prevent_touchmove_from_scrolling : function(drag) {
var touchstart = (Y.UA.ie) ? 'MSPointerStart' : 'touchstart';
var touchend = (Y.UA.ie) ? 'MSPointerEnd' : 'touchend';
var touchmove = (Y.UA.ie) ? 'MSPointerMove' : 'touchmove';
// Disable scrolling when touching the draggable items.
drag.on(touchstart, function() {
if (this.touchscrolldisable) {
return; // Already disabled.
}
this.touchscrolldisable = Y.one('body').on(touchmove, function(e) {
e = e || window.event;
e.preventDefault();
});
}, this);
// Allow scrolling after releasing the draggable items.
drag.on(touchend, function() {
if (this.touchscrolldisable) {
this.touchscrolldisable.detach();
this.touchscrolldisable = null;
}
}, this);
},
draggable : function (drag) {
var dd = new Y.DD.Drag({
node: drag,
@@ -358,7 +392,11 @@ Y.extend(DDMARKER_QUESTION, M.qtype_ddmarker.dd_base_class, {
//--- keyboard accessibility
drag.set('tabIndex', 0);
drag.on('dragchange', this.drop_zone_key_press, this);
// Prevent scrolling whilst dragging on Adroid devices.
this.prevent_touchmove_from_scrolling(drag);
},
save_all_xy_for_choice: function (choiceno, dropped) {
var coords = [];
var bgimgxy;