MDL-69104 Questions: Drag and drop question family don't work with iOS

- Drag and Drop marker question type
 - Drag and Drop onto image question type
 - Drag and Drop into text question type

question/type/ddimageortext/amd/src/question.js

@@ -336,6 +336,7 @@ define(['jquery', 'core/dragdrop', 'core/key_codes'], function($, dragDrop, keys
                         cloneDrag.removeClass('beingdragged');
                         cloneDrag.removeAttr('tabindex');
                         hiddenDrag.after(cloneDrag);
+                        questionManager.addEventHandlersToDrag(cloneDrag);
                         drag.offset(cloneDrag.offset());
                     } else {
                         hiddenDrag.addClass('active');
@@ -529,6 +530,7 @@ define(['jquery', 'core/dragdrop', 'core/key_codes'], function($, dragDrop, keys
                         cloneDrag.removeClass('beingdragged');
                         cloneDrag.removeAttr('tabindex');
                         hiddenDrag.after(cloneDrag);
+                        questionManager.addEventHandlersToDrag(cloneDrag);
                         nextDrag.offset(cloneDrag.offset());
                     } else {
                         hiddenDrag.addClass('active');
@@ -623,7 +625,7 @@ define(['jquery', 'core/dragdrop', 'core/key_codes'], function($, dragDrop, keys
             {
                 duration: 'fast',
                 done: function() {
-                    $('body').trigger('dragmoved', [drag, target, thisQ]);
+                    $('body').trigger('qtype_ddimageortext-dragmoved', [drag, target, thisQ]);
                     M.util.js_complete('qtype_ddimageortext-animate-' + thisQ.containerId);
                 }
             }
@@ -962,17 +964,16 @@ define(['jquery', 'core/dragdrop', 'core/key_codes'], function($, dragDrop, keys
          * Set up the event handlers that make this question type work. (Done once per page.)
          */
         setupEventHandlers: function() {
+            // We do not use the body event here to prevent the other event on Mobile device, such as scroll event.
+            questionManager.addEventHandlersToDrag($('.que.ddimageortext:not(.qtype_ddimageortext-readonly) .draghome'));
             $('body')
-                .on('mousedown touchstart',
-                    '.que.ddimageortext:not(.qtype_ddimageortext-readonly) .draghome',
-                    questionManager.handleDragStart)
                 .on('keydown',
                     '.que.ddimageortext:not(.qtype_ddimageortext-readonly) .dropzones .dropzone',
                     questionManager.handleKeyPress)
                 .on('keydown',
                     '.que.ddimageortext:not(.qtype_ddimageortext-readonly) .draghome.placed:not(.beingdragged)',
                     questionManager.handleKeyPress)
-                .on('dragmoved', questionManager.handleDragMoved);
+                .on('qtype_ddimageortext-dragmoved', questionManager.handleDragMoved);
             $(window).on('resize', function() {
                 questionManager.handleWindowResize(false);
             });
@@ -989,6 +990,15 @@ define(['jquery', 'core/dragdrop', 'core/key_codes'], function($, dragDrop, keys
             }, 100);
         },
 
+        /**
+         * Binding the drag/touch event again for newly created element.
+         *
+         * @param {jQuery} element Element to bind the event
+         */
+        addEventHandlersToDrag: function(element) {
+            element.on('mousedown touchstart', questionManager.handleDragStart);
+        },
+
         /**
          * Handle mouse down / touch start events on drags.
          * @param {Event} e the DOM event.

question/type/ddmarker/amd/src/question.js

@@ -568,6 +568,7 @@ define(['jquery', 'core/dragdrop', 'qtype_ddmarker/shapes', 'core/key_codes'], f
             this.getDragClone(drag)
                 .removeClass('active')
                 .after(dragclone);
+            questionManager.addEventHandlersToMarker(dragclone);
         }
     };
 
@@ -678,31 +679,9 @@ define(['jquery', 'core/dragdrop', 'qtype_ddmarker/shapes', 'core/key_codes'], f
          * Set up the event handlers that make this question type work. (Done once per page.)
          */
         setupEventHandlers: function() {
-            $('body')
+            // We do not use the body event here to prevent the other event on Mobile device, such as scroll event.
-                .on('mousedown touchstart',
+            questionManager.addEventHandlersToMarker($('.que.ddmarker:not(.qtype_ddmarker-readonly) div.draghomes .marker'));
-                    '.que.ddmarker:not(.qtype_ddmarker-readonly) div.draghomes .marker', questionManager.handleDragStart)
+            questionManager.addEventHandlersToMarker($('.que.ddmarker:not(.qtype_ddmarker-readonly) div.droparea .marker'));
-                .on('mousedown touchstart',
-                    '.que.ddmarker:not(.qtype_ddmarker-readonly) div.droparea .marker', questionManager.handleDragStart)
-                .on('keydown keypress',
-                    '.que.ddmarker:not(.qtype_ddmarker-readonly) div.draghomes .marker', questionManager.handleKeyPress)
-                .on('keydown keypress',
-                    '.que.ddmarker:not(.qtype_ddmarker-readonly) div.droparea .marker', questionManager.handleKeyPress)
-                .on('focusin',
-                    '.que.ddmarker:not(.qtype_ddmarker-readonly) div.draghomes .marker', function(e) {
-                        questionManager.handleKeyboardFocus(e, true);
-                    })
-                .on('focusin',
-                    '.que.ddmarker:not(.qtype_ddmarker-readonly) div.droparea .marker', function(e) {
-                        questionManager.handleKeyboardFocus(e, true);
-                    })
-                .on('focusout',
-                    '.que.ddmarker:not(.qtype_ddmarker-readonly) div.draghomes .marker', function(e) {
-                        questionManager.handleKeyboardFocus(e, false);
-                    })
-                .on('focusout',
-                    '.que.ddmarker:not(.qtype_ddmarker-readonly) div.droparea .marker', function(e) {
-                        questionManager.handleKeyboardFocus(e, false);
-                    });
             $(window).on('resize', function() {
                 questionManager.handleWindowResize(false);
             });
@@ -719,6 +698,23 @@ define(['jquery', 'core/dragdrop', 'qtype_ddmarker/shapes', 'core/key_codes'], f
             }, 100);
         },
 
+        /**
+         * Binding the event again for newly created element.
+         *
+         * @param {jQuery} element Element to bind the event
+         */
+        addEventHandlersToMarker: function(element) {
+            element
+                .on('mousedown touchstart', questionManager.handleDragStart)
+                .on('keydown keypress', questionManager.handleKeyPress)
+                .focusin(function(e) {
+                    questionManager.handleKeyboardFocus(e, true);
+                })
+                .focusout(function(e) {
+                    questionManager.handleKeyboardFocus(e, false);
+                });
+        },
+
         /**
          * Handle mouse down / touch start events on markers.
          * @param {Event} e the DOM event.

question/type/ddwtos/amd/src/ddwtos.js

@@ -212,6 +212,7 @@ define(['jquery', 'core/dragdrop', 'core/key_codes'], function($, dragDrop, keys
                         var cloneDrag = drag.clone();
                         cloneDrag.removeClass('beingdragged');
                         hiddenDrag.after(cloneDrag);
+                        questionManager.addEventHandlersToDrag(cloneDrag);
                         drag.offset(cloneDrag.offset());
                     } else {
                         hiddenDrag.addClass('active');
@@ -404,6 +405,7 @@ define(['jquery', 'core/dragdrop', 'core/key_codes'], function($, dragDrop, keys
                         cloneDrag.removeClass('beingdragged');
                         cloneDrag.removeAttr('tabindex');
                         hiddenDrag.after(cloneDrag);
+                        questionManager.addEventHandlersToDrag(cloneDrag);
                         nextDrag.offset(cloneDrag.offset());
                     } else {
                         hiddenDrag.addClass('active');
@@ -498,7 +500,7 @@ define(['jquery', 'core/dragdrop', 'core/key_codes'], function($, dragDrop, keys
             {
                 duration: 'fast',
                 done: function() {
-                    $('body').trigger('dragmoved', [drag, target, thisQ]);
+                    $('body').trigger('qtype_ddwtos-dragmoved', [drag, target, thisQ]);
                     M.util.js_complete('qtype_ddwtos-animate-' + thisQ.containerId);
                 }
             }
@@ -738,16 +740,25 @@ define(['jquery', 'core/dragdrop', 'core/key_codes'], function($, dragDrop, keys
          * Set up the event handlers that make this question type work. (Done once per page.)
          */
         setupEventHandlers: function() {
-            $('body').on('mousedown touchstart',
+            // We do not use the body event here to prevent the other event on Mobile device, such as scroll event.
-                '.que.ddwtos:not(.qtype_ddwtos-readonly) span.draghome',
+            questionManager.addEventHandlersToDrag($('.que.ddwtos:not(.qtype_ddwtos-readonly) span.draghome'));
-                questionManager.handleDragStart)
+            $('body')
                 .on('keydown',
                     '.que.ddwtos:not(.qtype_ddwtos-readonly) span.drop',
                     questionManager.handleKeyPress)
                 .on('keydown',
                     '.que.ddwtos:not(.qtype_ddwtos-readonly) span.draghome.placed:not(.beingdragged)',
                     questionManager.handleKeyPress)
-                .on('dragmoved', questionManager.handleDragMoved);
+                .on('qtype_ddwtos-dragmoved', questionManager.handleDragMoved);
+        },
+
+        /**
+         * Binding the drag/touch event again for newly created element.
+         *
+         * @param {jQuery} element Element to bind the event
+         */
+        addEventHandlersToDrag: function(element) {
+            element.on('mousedown touchstart', questionManager.handleDragStart);
         },
 
         /**