Added ability to communicate with server via input element. Work in progress. Part 8.

common/static/js/capa/drag_and_drop/config_parser.js

@@ -90,6 +90,12 @@ define(['logme'], function (logme) {
             returnStatus = false;
         }
 
+        if (state.config.targets.length === 0) {
+            state.individualTargets = false;
+        } else {
+            state.individualTargets = true;
+        }
+
         return true;
 
         function processDraggable(obj) {

common/static/js/capa/drag_and_drop/draggables.js

@@ -4,13 +4,14 @@
 // See https://edx-wiki.atlassian.net/wiki/display/LMS/Integration+of+Require+JS+into+the+system
 (function (requirejs, require, define) {
 
-define(['logme'], function (logme) {
+define(['logme', 'update_input'], function (logme, updateInput) {
     return Draggables;
 
     function Draggables(state) {
         var _draggables;
 
         _draggables = [];
+        state.draggables = [];
 
         (function (i) {
             while (i < state.config.draggable.length) {
@@ -23,7 +24,7 @@ define(['logme'], function (logme) {
 
         function processDraggable(obj, index) {
             var draggableContainerEl, imgEl, inContainer, ousePressed,
-                onTarget;
+                onTarget, draggableObj;
 
             draggableContainerEl = $(
                 '<div ' +
@@ -63,11 +64,22 @@ define(['logme'], function (logme) {
 
             onTarget = null;
 
+            draggableObj = {
+                'id': obj.id,
+                'x': -1,
+                'y': -1
+            };
+            state.draggables.push(draggableObj);
+
             draggableContainerEl.mousedown(mouseDown);
             draggableContainerEl.mouseup(mouseUp);
             draggableContainerEl.mousemove(mouseMove);
             draggableContainerEl.mouseleave(mouseLeave);
 
+            if (state.individualTargets === false) {
+                updateInput(state);
+            }
+
             return;
 
             function mouseDown(event) {
@@ -126,8 +138,14 @@ define(['logme'], function (logme) {
                         (offsetDE.top + 100 > offsetTE.top + state.targetEl.height())
                     ) {
                         moveBackToSlider();
+
+                        draggableObj.x = -1;
+                        draggableObj.y = -1;
                     } else {
                         correctZIndexes();
+
+                        draggableObj.x = offsetDE.left + 50 - offsetTE.left;
+                        draggableObj.y = offsetDE.top + 50 - offsetTE.top;
                     }
                 } else if (state.individualTargets === true) {
                     targetFound = false;
@@ -142,6 +160,8 @@ define(['logme'], function (logme) {
                     }
                 }
 
+                updateInput(state);
+
                 return;
 
                 function removeObjIdFromTarget() {

common/static/js/capa/drag_and_drop/targets.js

@@ -4,17 +4,10 @@
 // See https://edx-wiki.atlassian.net/wiki/display/LMS/Integration+of+Require+JS+into+the+system
 (function (requirejs, require, define) {
 
-define(['logme'], function (logme) {
+define(['logme', 'update_input'], function (logme, updateInput) {
     return Targets;
 
     function Targets(state) {
-        if (state.config.targets.length === 0) {
-            state.individualTargets = false;
-
-            return;
-        }
-
-        state.individualTargets = true;
         state.targets = [];
 
         (function (c1) {
@@ -68,6 +61,10 @@ define(['logme'], function (logme) {
                 'el': tEl,
                 'draggable': []
             });
+
+            if (state.individualTargets === true) {
+                updateInput(state);
+            }
         }
     }
 });

common/static/js/capa/drag_and_drop/update_input.js

@@ -0,0 +1,47 @@
+// Wrapper for RequireJS. It will make the standard requirejs(), require(), and
+// define() functions from Require JS available inside the anonymous function.
+//
+// See https://edx-wiki.atlassian.net/wiki/display/LMS/Integration+of+Require+JS+into+the+system
+(function (requirejs, require, define) {
+
+define(['logme'], function (logme) {
+    return updateInput;
+
+    function updateInput(state) {
+        var inputEl, stateStr, targets;
+
+        if (state.individualTargets === false) {
+            stateStr = JSON.stringify({
+                'individualTargets': false,
+                'draggables': state.draggables
+            });
+        } else {
+            targets = [];
+            (function (c1) {
+                while (c1 < state.targets.length) {
+                    targets.push({
+                        'id': state.targets[c1].id,
+                        'draggables': state.targets[c1].draggable
+                    });
+
+                    c1 += 1;
+                }
+            }(0));
+
+            stateStr = JSON.stringify({
+                'individualTargets': true,
+                'targets': targets
+            });
+        }
+
+        inputEl = $('#input_' + state.problemId);
+        inputEl.val(stateStr);
+    }
+
+});
+
+// End of wrapper for RequireJS. As you can see, we are passing
+// namespaced Require JS variables to an anonymous function. Within
+// it, you can use the standard requirejs(), require(), and define()
+// functions as if they were in the global namespace.
+}(RequireJS.requirejs, RequireJS.require, RequireJS.define)); // End-of: (function (requirejs, require, define)