diff --git a/common/static/js/capa/drag_and_drop/draggables.js b/common/static/js/capa/drag_and_drop/draggables.js
index 0eaf918748..17c68ae22d 100644
--- a/common/static/js/capa/drag_and_drop/draggables.js
+++ b/common/static/js/capa/drag_and_drop/draggables.js
@@ -22,7 +22,8 @@ define(['logme'], function (logme) {
         return;
 
         function processDraggable(obj, index) {
-            var draggableContainerEl, imgEl, inContainer, ousePressed;
+            var draggableContainerEl, imgEl, inContainer, ousePressed,
+                onTarget;
 
             draggableContainerEl = $(
                 '<div ' +
@@ -60,6 +61,8 @@ define(['logme'], function (logme) {
             inContainer = true;
             mousePressed = false;
 
+            onTarget = null;
+
             draggableContainerEl.mousedown(mouseDown);
             draggableContainerEl.mouseup(mouseUp);
             draggableContainerEl.mousemove(mouseMove);
@@ -87,40 +90,149 @@ define(['logme'], function (logme) {
                 }
             }
 
-            function mouseUp(event) {
+            function mouseUp() {
                 if (mousePressed === true) {
-                    checkLandingElement(event);
+                    checkLandingElement();
                 }
             }
 
-            function mouseMove(event) {
+            function mouseMove() {
                 if (mousePressed === true) {
                     draggableContainerEl.css('left', (event.pageX - 50));
                     draggableContainerEl.css('top', (event.pageY - 50));
-                    event.preventDefault();
                 }
             }
 
-            function mouseLeave(event) {
+            function mouseLeave() {
                 if (mousePressed === true) {
-                    checkLandingElement(event);
+                    checkLandingElement();
                 }
             }
 
-            function checkLandingElement(event) {
-                var offsetDE, offsetTE, indexes, DEindex;
+            function checkLandingElement() {
+                var offsetDE, offsetTE, indexes, DEindex, targetFound;
 
                 mousePressed = false;
 
                 offsetDE = draggableContainerEl.offset();
-                offsetTE = state.targetEl.offset();
 
-                if (
-                    (offsetDE.left < offsetTE.left) ||
-                    (offsetDE.left + 100 > offsetTE.left + state.targetEl.width()) ||
-                    (offsetDE.top < offsetTE.top) ||
-                    (offsetDE.top + 100 > offsetTE.top + state.targetEl.height())
-                ) {
+                if (state.individualTargets === false) {
+                    offsetTE = state.targetEl.offset();
+
+                    if (
+                        (offsetDE.left < offsetTE.left) ||
+                        (offsetDE.left + 100 > offsetTE.left + state.targetEl.width()) ||
+                        (offsetDE.top < offsetTE.top) ||
+                        (offsetDE.top + 100 > offsetTE.top + state.targetEl.height())
+                    ) {
+                        moveBackToSlider();
+                    } else {
+                        correctZIndexes();
+                    }
+                } else if (state.individualTargets === true) {
+                    targetFound = false;
+
+                    checkIfOnTarget();
+
+                    if (targetFound === true) {
+                        correctZIndexes();
+                    } else {
+                        moveBackToSlider();
+                        removeObjIdFromTarget();
+                    }
+                }
+
+                return;
+
+                function removeObjIdFromTarget() {
+                    var c1;
+
+                    if (onTarget !== null) {
+                        c1 = 0;
+
+                        while (c1 < onTarget.draggable.length) {
+                            if (onTarget.draggable[c1] === obj.id) {
+                                onTarget.draggable.splice(c1, 1);
+
+                                break;
+                            }
+                            c1 += 1;
+                        }
+
+                        onTarget = null;
+                    }
+                }
+
+                function checkIfOnTarget() {
+                    var c1, c2, target;
+
+                    c1 = 0;
+
+                    while (c1 < state.targets.length) {
+                        target = state.targets[c1];
+
+                        if (offsetDE.top + 50 < target.offset.top) {
+                            c1 += 1;
+                            continue;
+                        }
+                        if (offsetDE.top + 50 > target.offset.top + target.h) {
+                            c1 += 1;
+                            continue;
+                        }
+                        if (offsetDE.left + 50 < target.offset.left) {
+                            c1 += 1;
+                            continue;
+                        }
+                        if (offsetDE.left + 50 > target.offset.left + target.w) {
+                            c1 += 1;
+                            continue;
+                        }
+
+                        if (state.config.one_per_target === true) {
+                            if (
+                                (target.draggable.length === 1) &&
+                                (target.draggable[0] !== obj.id)
+                            ) {
+                                c1 += 1;
+                                continue;
+                            }
+                        }
+
+                        targetFound = true;
+
+                        removeObjIdFromTarget();
+                        onTarget = target;
+
+                        target.draggable.push(obj.id);
+                        snapToTarget(target);
+
+                        break;
+                    }
+                }
+
+                function snapToTarget(target) {
+                    draggableContainerEl.css('left', (target.offset.left + 0.5 * target.w - 50));
+                    draggableContainerEl.css('top', (target.offset.top + 0.5 * target.h - 50));
+                }
+
+                function correctZIndexes() {
+                    var c1;
+
+                    c1 = 0;
+
+                    while (c1 < _draggables.length) {
+                        if (parseInt(draggableContainerEl.attr('data-old-z-index'), 10) < parseInt(_draggables[c1].css('z-index'), 10)) {
+                            _draggables[c1].css('z-index', parseInt(_draggables[c1].css('z-index'), 10) - 1);
+                        }
+                        c1 += 1;
+                    }
+
+                    draggableContainerEl.css('z-index', c1);
+                }
+
+                function moveBackToSlider() {
+                    var c1;
+
                     draggableContainerEl.detach();
                     draggableContainerEl.css('position', 'static');
 
@@ -134,35 +246,22 @@ define(['logme'], function (logme) {
                         });
                     });
 
-                    (function (c1) {
-                        while (c1 < indexes.length) {
-                            if ((inContainer === false) && (indexes[c1].index > DEindex)) {
-                                indexes[c1].el.before(draggableContainerEl);
-                                inContainer = true;
-                            }
+                    c1 = 0;
 
-                            c1 += 1;
+                    while (c1 < indexes.length) {
+                        if ((inContainer === false) && (indexes[c1].index > DEindex)) {
+                            indexes[c1].el.before(draggableContainerEl);
+                            inContainer = true;
                         }
-                    }(0));
+
+                        c1 += 1;
+                    }
 
                     if (inContainer === false) {
                         draggableContainerEl.appendTo(state.sliderEl);
                         inContainer = true;
                     }
                 }
-
-                (function (c1) {
-                    while (c1 < _draggables.length) {
-                        if (parseInt(draggableContainerEl.attr('data-old-z-index'), 10) < parseInt(_draggables[c1].css('z-index'), 10)) {
-                            _draggables[c1].css('z-index', parseInt(_draggables[c1].css('z-index'), 10) - 1);
-                        }
-                        c1 += 1;
-                    }
-
-                    draggableContainerEl.css('z-index', c1);
-                }(0));
-
-                event.preventDefault();
             }
         }
 
diff --git a/common/static/js/capa/drag_and_drop/scroller.js b/common/static/js/capa/drag_and_drop/scroller.js
index d6d945e329..4048b50c94 100644
--- a/common/static/js/capa/drag_and_drop/scroller.js
+++ b/common/static/js/capa/drag_and_drop/scroller.js
@@ -8,8 +8,7 @@ define(['logme'], function (logme) {
     return Scroller;
 
     function Scroller(state) {
-        var parentEl, moveLeftEl, showEl, moveRightEL,
-            moveRightEl_leftMargin;
+        var parentEl, moveLeftEl, showEl, moveRightEL, showElLeftMargin;
 
         parentEl = $(
             '<div ' +
@@ -37,9 +36,9 @@ define(['logme'], function (logme) {
         moveLeftEl.appendTo(parentEl);
 
         moveLeftEl.click(function () {
-            state.showElLeftMargin += 100;
+            showElLeftMargin += 100;
             state.sliderEl.animate({
-                'margin-left': state.showElLeftMargin + 'px'
+                'margin-left': showElLeftMargin + 'px'
             });
         });
 
@@ -56,7 +55,7 @@ define(['logme'], function (logme) {
         );
         showEl.appendTo(parentEl);
 
-        state.showElLeftMargin = 0;
+        showElLeftMargin = 0;
 
         state.sliderEl = $(
             '<div ' +
@@ -82,9 +81,9 @@ define(['logme'], function (logme) {
         moveRightEl.appendTo(parentEl);
 
         moveRightEl.click(function () {
-            state.showElLeftMargin -= 100;
+            showElLeftMargin -= 100;
             state.sliderEl.animate({
-                'margin-left': state.showElLeftMargin + 'px'
+                'margin-left': showElLeftMargin + 'px'
             });
         });
 
diff --git a/common/static/js/capa/drag_and_drop/target_container.js b/common/static/js/capa/drag_and_drop/target_container.js
index 62562b5039..013ca42e19 100644
--- a/common/static/js/capa/drag_and_drop/target_container.js
+++ b/common/static/js/capa/drag_and_drop/target_container.js
@@ -28,15 +28,11 @@ define(['logme'], function (logme) {
         );
         state.targetEl.appendTo(targetElContainer);
 
-        state.targetEl_loaded = false;
-
-        $("<img/>") // Make in memory copy of image to avoid css issues.
-            .attr("src", state.targetEl.attr("src"))
-            .load(function() {
-                state.targetEl_height = this.height;
-                state.targetEl_width = this.width;
-
-                state.targetEl_loaded = true;
+        state.targetElWidth = null;
+        $('<img/>') // Make in memory copy of image to avoid css issues.
+            .attr('src', state.targetEl.attr('src'))
+            .load(function () {
+                state.targetElWidth = this.width;
             });
 
         state.targetEl.mousemove(
diff --git a/common/static/js/capa/drag_and_drop/targets.js b/common/static/js/capa/drag_and_drop/targets.js
index b41123cc69..44431becba 100644
--- a/common/static/js/capa/drag_and_drop/targets.js
+++ b/common/static/js/capa/drag_and_drop/targets.js
@@ -8,6 +8,15 @@ define(['logme'], function (logme) {
     return Targets;
 
     function Targets(state) {
+        if (state.config.targets.length === 0) {
+            state.individualTargets = false;
+
+            return;
+        }
+
+        state.individualTargets = true;
+        state.targets = [];
+
         (function (c1) {
             while (c1 < state.config.targets.length) {
                 processTarget(state.config.targets[c1]);
@@ -18,17 +27,21 @@ define(['logme'], function (logme) {
         return;
 
         function processTarget(obj) {
-            var targetElOffset, tEl, left, top;
+            var targetElOffset, tEl, left, borderCss;
 
-            if (state.targetEl_loaded === false) {
+            if (state.targetElWidth === null) {
                 window.setTimeout(function () {
                     processTarget(obj);
                 }, 50);
                 return;
             }
 
-            left = obj.x + 0.5 * (state.targetEl.parent().width() - state.targetEl_width);
-            top = obj.y
+            left = obj.x + 0.5 * (state.targetEl.parent().width() - state.targetElWidth);
+
+            borderCss = '';
+            if (state.config.target_outline === true) {
+                borderCss = 'border: 1px solid black; ';
+            }
 
             tEl = $(
                 '<div ' +
@@ -37,15 +50,24 @@ define(['logme'], function (logme) {
                         'position: absolute; ' +
                         'width: ' + obj.w + 'px; ' +
                         'height: ' + obj.h + 'px; ' +
-                        'top: ' + top + 'px; ' +
+                        'top: ' + obj.y + 'px; ' +
                         'left: ' + left + 'px; ' +
-                        'border: 1px solid black; ' +
+                        borderCss +
                     '" ' +
                     'data-target-id="' + obj.id + '" ' +
                 '></div>'
             );
 
             tEl.appendTo(state.targetEl.parent());
+
+            state.targets.push({
+                'id': obj.id,
+                'offset': tEl.offset(),
+                'w': obj.w,
+                'h': obj.h,
+                'el': tEl,
+                'draggable': []
+            });
         }
     }
 });