Wait 500 milliseconds before starting drag on touch.

This allows users to scroll the item bank with their finger without
accidentally starting to drag items.

Mouse drag events still start without a delay, since scrolling works
differently on desktops.

I found no way to implement this with jQuery UI draggable, so I had to
reimplement drag and drop interactions, which in some ways makes it
cleaner because it doesn't bypass virtualDOM.

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 ***/

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