Merge pull request #133 from edx-solutions/mtyaka/MCKIN-5772-mobile-drag-delay

[MCKIN-5774] Wait 500 milliseconds before starting drag on touch.

drag_and_drop_v2/drag_and_drop_v2.py

@@ -262,12 +262,9 @@ class DragAndDropBlock(
         fragment = Fragment()
         fragment.add_content(loader.render_template('/templates/html/drag_and_drop.html'))
         css_urls = (
-            'public/css/vendor/jquery-ui-1.10.4.custom.min.css',
-            'public/css/drag_and_drop.css'
+            'public/css/drag_and_drop.css',
         )
         js_urls = (
-            'public/js/vendor/jquery-ui-1.10.4.custom.min.js',
-            'public/js/vendor/jquery-ui-touch-punch-0.2.3.min.js',  # Makes it work on touch devices
             'public/js/vendor/virtual-dom-1.3.0.min.js',
             'public/js/drag_and_drop.js',
         )
@@ -357,11 +354,9 @@ class DragAndDropBlock(
         fragment.add_content(loader.render_template('/templates/html/drag_and_drop_edit.html', context))
 
         css_urls = (
-            'public/css/vendor/jquery-ui-1.10.4.custom.min.css',
-            'public/css/drag_and_drop_edit.css'
+            'public/css/drag_and_drop_edit.css',
         )
         js_urls = (
-            'public/js/vendor/jquery-ui-1.10.4.custom.min.js',
             'public/js/vendor/handlebars-v1.1.2.js',
             'public/js/drag_and_drop_edit.js',
         )

drag_and_drop_v2/public/css/drag_and_drop.css

@@ -67,6 +67,7 @@
     width: auto;
     padding: 1%;
     background-color: #ebf0f2;
+    position: relative;
 }
 
 /*** DRAGGABLE ITEMS ***/
@@ -725,3 +726,12 @@
     background-color: #ffffff;
     color: #000000;
 }
+
+
+/* Prevent mobile browsers from emulating hover effects on item tap, which can be confusing. */
+@media (hover: none) {
+    .xblock--drag-and-drop .drag-container .option[draggable='true']:hover {
+        outline: none;
+        box-shadow: none;
+    }
+}

drag_and_drop_v2/public/js/vendor/jquery-ui-touch-punch-0.2.3.min.js

-/*!
- * jQuery UI Touch Punch 0.2.3
- *
- * Copyright 2011–2014, Dave Furfero
- * Dual licensed under the MIT or GPL Version 2 licenses.
- *
- * Depends:
- *  jquery.ui.widget.js
- *  jquery.ui.mouse.js
- */
-!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);
\ No newline at end of file

requirements.txt

 git+https://github.com/edx/xblock-utils.git@v1.0.4#egg=xblock-utils==1.0.4
+git+https://github.com/edx/XBlock.git@xblock-0.5.0#egg=XBlock==0.5.0
 -e .

tests/integration/test_render.py

@@ -188,7 +188,6 @@ class TestDragAndDropRender(BaseIntegrationTest):
             self.assertEqual(zone.get_attribute('aria-dropeffect'), 'move')
             self.assertEqual(zone.get_attribute('data-uid'), 'Zone {}'.format(zone_number))
             self.assertEqual(zone.get_attribute('data-zone_align'), 'center')
-            self.assertIn('ui-droppable', self.get_element_classes(zone))
             zone_box_percentages = box_percentages[index]
             self._assert_box_percentages(  # pylint: disable=star-args
                 '#-Zone_{}'.format(zone_number), **zone_box_percentages