Client side drag and drop. Work in progress. Part 4.

common/static/js/capa/drag_and_drop/container.js

@@ -12,7 +12,7 @@ define(['logme'], function (logme) {
             '<div ' +
                 'style=" ' +
                     'border: 1px solid black; ' +
-                    'overflow: hidden; ' +
+                    // 'overflow: hidden; ' +
                     'clear: both; ' +
                 '" ' +
             '></div>'

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

@@ -10,15 +10,14 @@ define(['logme'], function (logme) {
     function Draggables(state) {
         (function (i) {
             while (i < state.config.draggable.length) {
-                processDraggable(state.config.draggable[i]);
+                processDraggable(state.config.draggable[i], i + 1);
                 i += 1;
             }
         }(0));
 
-        function processDraggable(obj) {
-            var draggableContainerEl;
-
-            logme(obj);
+        function processDraggable(obj, index) {
+            var draggableContainerEl, imgEl, inContainer,
+                mouseDown;
 
             draggableContainerEl = $(
                 '<div ' +
@@ -27,17 +26,113 @@ define(['logme'], function (logme) {
                         'height: 100px; ' +
                         'display: inline; ' +
                         'float: left; ' +
+                        'overflow: hidden; ' +
                     '" ' +
+                    'data-draggable-position-index="' + index + '" ' +
                     '></div>'
             );
 
             if (obj.icon.length > 0) {
+                imgEl = $(
+                    '<img ' +
+                        'src="' + state.config.imageDir + '/' + obj.icon + '" ' +
+                    '/>'
+                );
+
+                draggableContainerEl.append(imgEl);
+            }
+
+            if (obj.label.length > 0) {
                 draggableContainerEl.append(
-                    $('<img src="' + state.config.imageDir + '/' + obj.icon + '" />')
+                    $('<div style="clear: both; text-align: center;">' + obj.label + '</div>')
                 );
             }
 
             draggableContainerEl.appendTo(state.sliderEl);
+
+            inContainer = true;
+            mouseDown = false;
+
+            draggableContainerEl.mousedown(function (event) {
+                if (mouseDown === false) {
+                    if (inContainer === true) {
+                        draggableContainerEl.detach();
+                        draggableContainerEl.css('position', 'absolute');
+                        draggableContainerEl.css('left', (event.pageX - 50));
+                        draggableContainerEl.css('top', (event.pageY - 50));
+                        draggableContainerEl.appendTo(state.containerEl);
+
+                        inContainer = false;
+                    }
+
+                    mouseDown = true;
+                    event.preventDefault();
+                }
+            });
+
+            draggableContainerEl.mouseup(function (event) {
+                if (mouseDown === true) {
+                    mouseDown = false;
+                    checkLandingElement(event);
+                    event.preventDefault();
+                }
+            });
+
+            draggableContainerEl.mousemove(function (event) {
+                if (mouseDown === true) {
+                    draggableContainerEl.css('left', (event.pageX - 50));
+                    draggableContainerEl.css('top', (event.pageY - 50));
+                    event.preventDefault();
+                }
+            });
+
+            draggableContainerEl.mouseleave(function (event) {
+                if (mouseDown === true) {
+                    mouseDown = false;
+                    checkLandingElement(event);
+                    event.preventDefault();
+                }
+            });
+
+            return;
+
+            function checkLandingElement(event) {
+                var offsetDE, children;
+
+                offsetDE = draggableContainerEl.offset();
+
+                if (
+                    (offsetDE.left < state.targetEl.offset().left) ||
+                    (offsetDE.left + 100 > state.targetEl.offset().left + state.targetEl.width()) ||
+                    (offsetDE.top < state.targetEl.offset().top) ||
+                    (offsetDE.top + 100 > state.targetEl.offset().top + state.targetEl.height())
+                ) {
+                    draggableContainerEl.detach();
+                    draggableContainerEl.css('position', 'static');
+
+                    children = state.sliderEl.children();
+
+                    if (children.length === 0) {
+                        draggableContainerEl.appendTo(state.sliderEl);
+                    } else {
+                        state.sliderEl.children().each(function (index, value) {
+                            if (inContainer === false) {
+                                if (parseInt($(value).attr('data-draggable-position-index'), 10) + 1 === parseInt(draggableContainerEl.attr('data-draggable-position-index'), 10)) {
+                                    $(value).after(draggableContainerEl);
+                                    inContainer = true;
+                                } else if (parseInt($(value).attr('data-draggable-position-index'), 10) - 1 === parseInt(draggableContainerEl.attr('data-draggable-position-index'), 10)) {
+                                    $(value).before(draggableContainerEl);
+                                    inContainer = true;
+                                }
+                            }
+                        });
+                    }
+
+                    if (inContainer === false) {
+                        draggableContainerEl.appendTo(state.sliderEl);
+                    }
+                }
+            }
         }
 
     }

common/static/js/capa/drag_and_drop/scroller.js

@@ -37,7 +37,7 @@ define(['logme'], function (logme) {
         moveLeftEl.appendTo(parentEl);
 
         moveLeftEl.click(function () {
-            state.showElLeftMargin -= 100;
+            state.showElLeftMargin += 100;
             state.sliderEl.animate({
                 'margin-left': state.showElLeftMargin + 'px'
             });
@@ -82,7 +82,7 @@ define(['logme'], function (logme) {
         moveRightEl.appendTo(parentEl);
 
         moveRightEl.click(function () {
-            state.showElLeftMargin += 100;
+            state.showElLeftMargin -= 100;
             state.sliderEl.animate({
                 'margin-left': state.showElLeftMargin + 'px'
             });

common/static/js/capa/drag_and_drop/target.js

@@ -48,6 +48,8 @@ define(['logme'], function (logme) {
         mouseMoveDiv.appendTo(targetElContainer);
 
         targetElContainer.appendTo(state.containerEl);
+
+        state.targetElOffset = state.targetEl.offset();
     }
 });