diff --git a/common/static/js/capa/drag_and_drop/base_image.js b/common/static/js/capa/drag_and_drop/base_image.js
index 9cee42feb2..9c7c217214 100644
--- a/common/static/js/capa/drag_and_drop/base_image.js
+++ b/common/static/js/capa/drag_and_drop/base_image.js
@@ -16,18 +16,26 @@ define(['logme'], function (logme) {
'style=" ' +
'position: relative; ' +
'margin-bottom: 25px; ' +
+ 'margin-left: auto; ' +
+ 'margin-right: auto; ' +
'" ' +
'>'
);
- state.baseImageEl = $(
- '![]()
'
+ state.baseImageEl = $('![]()
');
+ state.baseImageEl.attr(
+ 'src',
+ state.config.imageDir + '/' + state.config.base_image
);
- state.baseImageEl.appendTo(baseImageElContainer);
+ state.baseImageEl.load(function () {
+ baseImageElContainer.css('width', this.width);
+ baseImageElContainer.css('height', this.height);
- baseImageElContainer.appendTo(state.containerEl);
+ state.baseImageEl.appendTo(baseImageElContainer);
+ baseImageElContainer.appendTo(state.containerEl);
+
+ state.baseImageLoaded = true;
+ });
}
});
diff --git a/common/static/js/capa/drag_and_drop/draggables.js b/common/static/js/capa/drag_and_drop/draggables.js
index 0800ce4c6b..78fc47bf75 100644
--- a/common/static/js/capa/drag_and_drop/draggables.js
+++ b/common/static/js/capa/drag_and_drop/draggables.js
@@ -21,8 +21,6 @@ define(['logme', 'update_input'], function (logme, updateInput) {
state.currentMovingDraggable = null;
$(document).mousemove(function (event) {
- normalizeEvent(event);
-
if (state.currentMovingDraggable !== null) {
state.currentMovingDraggable.iconEl.css(
'left',
@@ -38,6 +36,12 @@ define(['logme', 'update_input'], function (logme, updateInput) {
);
if (state.currentMovingDraggable.labelEl !== null) {
+ state.currentMovingDraggable.labelEl.css(
+ 'left',
+ event.pageX -
+ state.baseImageEl.offset().left -
+ state.currentMovingDraggable.labelWidth * 0.5
+ );
state.currentMovingDraggable.labelEl.css(
'top',
event.pageY -
@@ -45,12 +49,6 @@ define(['logme', 'update_input'], function (logme, updateInput) {
state.currentMovingDraggable.iconHeight * 0.5 +
5
);
- state.currentMovingDraggable.labelEl.css(
- 'left',
- event.pageX -
- state.baseImageEl.offset().left -
- state.currentMovingDraggable.labelWidth * 0.5
- );
}
}
});
@@ -99,23 +97,39 @@ define(['logme', 'update_input'], function (logme, updateInput) {
if (draggableObj.iconWidth >= draggableObj.iconHeight) {
draggableObj.iconWidthSmall = 60;
- draggableObj.iconHeightSmall = draggableObj.iconWidthSmall * (draggableObj.iconHeight / draggableObj.iconWidth);
+ draggableObj.iconHeightSmall =
+ draggableObj.iconWidthSmall *
+ (draggableObj.iconHeight / draggableObj.iconWidth);
} else {
draggableObj.iconHeightSmall = 60;
- draggableObj.iconWidthSmall = draggableObj.iconHeightSmall * (draggableObj.iconWidth / draggableObj.iconHeight);
+ draggableObj.iconWidthSmall =
+ draggableObj.iconHeightSmall *
+ (draggableObj.iconWidth / draggableObj.iconHeight);
}
draggableObj.iconEl.css('position', 'absolute');
- draggableObj.iconEl.css('width', draggableObj.iconWidthSmall);
- draggableObj.iconEl.css('height', draggableObj.iconHeightSmall);
+ draggableObj.iconEl.css(
+ 'width',
+ draggableObj.iconWidthSmall
+ );
+ draggableObj.iconEl.css(
+ 'height',
+ draggableObj.iconHeightSmall
+ );
- draggableObj.iconEl.css('left', 50 - draggableObj.iconWidthSmall * 0.5);
+ draggableObj.iconEl.css(
+ 'left',
+ 50 - draggableObj.iconWidthSmall * 0.5
+ );
if (obj.label.length > 0) {
draggableObj.iconEl.css('top', 5);
} else {
- draggableObj.iconEl.css('top', 50 - draggableObj.iconHeightSmall * 0.5);
+ draggableObj.iconEl.css(
+ 'top',
+ 50 - draggableObj.iconHeightSmall * 0.5
+ );
}
draggableObj.iconEl.appendTo(draggableObj.containerEl);
@@ -131,12 +145,20 @@ define(['logme', 'update_input'], function (logme, updateInput) {
''
);
- draggableObj.labelEl.appendTo(draggableObj.containerEl);
+ draggableObj.labelEl.appendTo(
+ draggableObj.containerEl
+ );
draggableObj.labelWidth = draggableObj.labelEl.width();
- draggableObj.labelEl.css('left', 50 - draggableObj.labelWidth * 0.5);
- draggableObj.labelEl.css('top', 5 + draggableObj.iconHeightSmall + 5);
+ draggableObj.labelEl.css(
+ 'left',
+ 50 - draggableObj.labelWidth * 0.5
+ );
+ draggableObj.labelEl.css(
+ 'top',
+ 5 + draggableObj.iconHeightSmall + 5
+ );
draggableObj.labelEl.mousedown(mouseDown);
draggableObj.labelEl.mouseup(mouseUp);
@@ -168,8 +190,14 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.iconWidthSmall = draggableObj.iconWidth;
draggableObj.iconHeightSmall = draggableObj.iconHeight;
- draggableObj.iconEl.css('left', 50 - draggableObj.iconWidthSmall * 0.5);
- draggableObj.iconEl.css('top', 50 - draggableObj.iconHeightSmall * 0.5);
+ draggableObj.iconEl.css(
+ 'left',
+ 50 - draggableObj.iconWidthSmall * 0.5
+ );
+ draggableObj.iconEl.css(
+ 'top',
+ 50 - draggableObj.iconHeightSmall * 0.5
+ );
} else {
// If no icon and no label, don't create a draggable.
return;
@@ -189,8 +217,12 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.x = -1;
draggableObj.y = -1;
- draggableObj.setInContainer = function (val) { inContainer = val; };
- draggableObj.setOnTarget = function (val) { onTarget = val; };
+ draggableObj.setInContainer = function (val) {
+ inContainer = val;
+ };
+ draggableObj.setOnTarget = function (val) {
+ onTarget = val;
+ };
state.draggables.push(draggableObj);
@@ -204,26 +236,58 @@ define(['logme', 'update_input'], function (logme, updateInput) {
function mouseDown(event) {
if (mousePressed === false) {
- state.currentMovingDraggable = draggableObj;
- normalizeEvent(event);
+ // So that the browser does not perform a default drag.
+ // If we don't do this, each drag operation will
+ // potentially cause the highlghting of the dragged element.
+ event.preventDefault();
+ // If this draggable is just being dragged out of the
+ // container, we must perform some additional tasks.
if (inContainer === true) {
draggableObj.containerEl.hide();
draggableObj.iconEl.detach();
-
- draggableObj.iconEl.css('width', draggableObj.iconWidth);
- draggableObj.iconEl.css('height', draggableObj.iconHeight);
-
- draggableObj.iconEl.css('left', event.pageX - state.baseImageEl.offset().left - draggableObj.iconWidth * 0.5);
- draggableObj.iconEl.css('top', event.pageY - state.baseImageEl.offset().top - draggableObj.iconHeight * 0.5);
- draggableObj.iconEl.appendTo(state.baseImageEl.parent());
+ draggableObj.iconEl.css(
+ 'width',
+ draggableObj.iconWidth
+ );
+ draggableObj.iconEl.css(
+ 'height',
+ draggableObj.iconHeight
+ );
+ draggableObj.iconEl.css(
+ 'left',
+ event.pageX -
+ state.baseImageEl.offset().left -
+ draggableObj.iconWidth * 0.5
+ );
+ draggableObj.iconEl.css(
+ 'top',
+ event.pageY -
+ state.baseImageEl.offset().top -
+ draggableObj.iconHeight * 0.5
+ );
+ draggableObj.iconEl.appendTo(
+ state.baseImageEl.parent()
+ );
if (draggableObj.labelEl !== null) {
draggableObj.labelEl.detach();
- draggableObj.labelEl.css('left', event.pageX - state.baseImageEl.offset().left - draggableObj.labelWidth * 0.5);
- draggableObj.labelEl.css('top', event.pageY - state.baseImageEl.offset().top + draggableObj.iconHeight * 0.5 + 5);
- draggableObj.labelEl.appendTo(state.baseImageEl.parent());
+ draggableObj.labelEl.css(
+ 'left',
+ event.pageX -
+ state.baseImageEl.offset().left -
+ draggableObj.labelWidth * 0.5
+ );
+ draggableObj.labelEl.css(
+ 'top',
+ event.pageY -
+ state.baseImageEl.offset().top +
+ draggableObj.iconHeight * 0.5 + 5
+ );
+ draggableObj.labelEl.appendTo(
+ state.baseImageEl.parent()
+ );
}
inContainer = false;
@@ -235,7 +299,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.iconEl.css('z-index', '1000');
mousePressed = true;
- event.preventDefault();
+ state.currentMovingDraggable = draggableObj;
}
}
@@ -249,8 +313,42 @@ define(['logme', 'update_input'], function (logme, updateInput) {
function mouseMove() {
if (mousePressed === true) {
- draggableObj.iconEl.css('left', event.pageX - state.baseImageEl.offset().left - draggableObj.iconWidth * 0.5);
- draggableObj.iconEl.css('top', event.pageY - state.baseImageEl.offset().top - draggableObj.iconHeight * 0.5);
+ // Because we have also attached a 'mousemove' event to the
+ // 'document' (that will do the same thing), let's tell the
+ // browser not to bubble up this event. The attached event
+ // on the 'document' will only be triggered when the mouse
+ // pointer leaves the draggable while it is in the middle
+ // of a drag operation (user moves the mouse very quickly).
+ event.stopPropagation();
+
+ draggableObj.iconEl.css(
+ 'left',
+ event.pageX -
+ state.baseImageEl.offset().left -
+ draggableObj.iconWidth * 0.5
+ );
+ draggableObj.iconEl.css(
+ 'top',
+ event.pageY -
+ state.baseImageEl.offset().top -
+ draggableObj.iconHeight * 0.5
+ );
+
+ if (draggableObj.labelEl !== null) {
+ draggableObj.labelEl.css(
+ 'left',
+ event.pageX -
+ state.baseImageEl.offset().left -
+ draggableObj.labelWidth * 0.5
+ );
+ draggableObj.labelEl.css(
+ 'top',
+ event.pageY -
+ state.baseImageEl.offset().top +
+ draggableObj.iconHeight * 0.5 +
+ 5
+ );
+ }
}
}
@@ -280,11 +378,22 @@ define(['logme', 'update_input'], function (logme, updateInput) {
state.numDraggablesInSlider += 1;
}
} else {
+ logme(
+ 'baseImageEl.width = ' + state.baseImageEl.width() + '; ' +
+ 'baseImageEl.height = ' + state.baseImageEl.height()
+ );
+
if (
(offsetIE.left < 0) ||
- (offsetIE.left + draggableObj.iconWidth > state.baseImageEl.width()) ||
+ (
+ offsetIE.left + draggableObj.iconWidth >
+ state.baseImageEl.width()
+ ) ||
(offsetIE.top < 0) ||
- (offsetIE.top + draggableObj.iconHeight > state.baseImageEl.height())
+ (
+ offsetIE.top + draggableObj.iconHeight >
+ state.baseImageEl.height()
+ )
) {
moveBackToSlider();
@@ -295,8 +404,10 @@ define(['logme', 'update_input'], function (logme, updateInput) {
} else {
correctZIndexes();
- draggableObj.x = offsetIE.left + draggableObj.iconWidth * 0.5;
- draggableObj.y = offsetIE.top + draggableObj.iconHeight * 0.5;
+ draggableObj.x =
+ offsetIE.left + draggableObj.iconWidth * 0.5;
+ draggableObj.y =
+ offsetIE.top + draggableObj.iconHeight * 0.5;
}
}
@@ -331,16 +442,28 @@ define(['logme', 'update_input'], function (logme, updateInput) {
for (c1 = 0; c1 < state.targets.length; c1 += 1) {
target = state.targets[c1];
- if (offsetIE.top + draggableObj.iconHeight * 0.5 < target.offset.top) {
+ if (
+ offsetIE.top + draggableObj.iconHeight * 0.5 <
+ target.offset.top
+ ) {
continue;
}
- if (offsetIE.top + draggableObj.iconHeight * 0.5 > target.offset.top + target.h) {
+ if (
+ offsetIE.top + draggableObj.iconHeight * 0.5 >
+ target.offset.top + target.h
+ ) {
continue;
}
- if (offsetIE.left + draggableObj.iconWidth * 0.5 < target.offset.left) {
+ if (
+ offsetIE.left + draggableObj.iconWidth * 0.5 <
+ target.offset.left
+ ) {
continue;
}
- if (offsetIE.left + draggableObj.iconWidth * 0.5 > target.offset.left + target.w) {
+ if (
+ offsetIE.left + draggableObj.iconWidth * 0.5 >
+ target.offset.left + target.w
+ ) {
continue;
}
@@ -358,7 +481,10 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// another, then we need to remove it's ID from the
// previous target's draggables list, and add it to the
// new target's draggables list.
- if ((onTarget !== null) && (onTarget.id !== target.id)) {
+ if (
+ (onTarget !== null) &&
+ (onTarget.id !== target.id)
+ ) {
removeObjIdFromTarget();
onTarget = target;
target.draggable.push(draggableObj.id);
@@ -383,12 +509,28 @@ define(['logme', 'update_input'], function (logme, updateInput) {
offset = 1;
}
- draggableObj.iconEl.css('left', target.offset.left + 0.5 * target.w - draggableObj.iconWidth * 0.5 + offset);
- draggableObj.iconEl.css('top', target.offset.top + 0.5 * target.h - draggableObj.iconHeight * 0.5 + offset);
+ draggableObj.iconEl.css(
+ 'left',
+ target.offset.left + 0.5 * target.w -
+ draggableObj.iconWidth * 0.5 + offset
+ );
+ draggableObj.iconEl.css(
+ 'top',
+ target.offset.top + 0.5 * target.h -
+ draggableObj.iconHeight * 0.5 + offset
+ );
if (draggableObj.labelEl !== null) {
- draggableObj.labelEl.css('left', target.offset.left + 0.5 * target.w - draggableObj.labelWidth * 0.5 + offset);
- draggableObj.labelEl.css('top', target.offset.top + 0.5 * target.h + draggableObj.iconHeight * 0.5 + 5 + offset);
+ draggableObj.labelEl.css(
+ 'left',
+ target.offset.left + 0.5 * target.w -
+ draggableObj.labelWidth * 0.5 + offset
+ );
+ draggableObj.labelEl.css(
+ 'top',
+ target.offset.top + 0.5 * target.h +
+ draggableObj.iconHeight * 0.5 + 5 + offset
+ );
}
}
@@ -406,7 +548,10 @@ define(['logme', 'update_input'], function (logme, updateInput) {
var c1;
for (c1 = 0; c1 < state.draggables.length; c1++) {
- if (draggableObj.oldZIndex < state.draggables[c1].zIndex) {
+ if (
+ draggableObj.oldZIndex <
+ state.draggables[c1].zIndex
+ ) {
state.draggables[c1].zIndex -= 1;
state.draggables[c1].iconEl.css(
'z-index',
@@ -427,40 +572,50 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.iconEl.detach();
- draggableObj.iconEl.css('width', draggableObj.iconWidthSmall);
- draggableObj.iconEl.css('height', draggableObj.iconHeightSmall);
+ draggableObj.iconEl.css(
+ 'width',
+ draggableObj.iconWidthSmall
+ );
+ draggableObj.iconEl.css(
+ 'height',
+ draggableObj.iconHeightSmall
+ );
- draggableObj.iconEl.css('left', 50 - draggableObj.iconWidthSmall * 0.5);
+ draggableObj.iconEl.css(
+ 'left',
+ 50 - draggableObj.iconWidthSmall * 0.5
+ );
if (draggableObj.labelEl !== null) {
draggableObj.iconEl.css('top', 5);
} else {
- draggableObj.iconEl.css('top', 50 - draggableObj.iconHeightSmall * 0.5);
+ draggableObj.iconEl.css(
+ 'top',
+ 50 - draggableObj.iconHeightSmall * 0.5
+ );
}
draggableObj.iconEl.appendTo(draggableObj.containerEl);
if (draggableObj.labelEl !== null) {
draggableObj.labelEl.detach();
- draggableObj.labelEl.css('left', 50 - draggableObj.labelWidth * 0.5);
- draggableObj.labelEl.css('top', 5 + draggableObj.iconHeightSmall + 5);
- draggableObj.labelEl.appendTo(draggableObj.containerEl);
+ draggableObj.labelEl.css(
+ 'left',
+ 50 - draggableObj.labelWidth * 0.5
+ );
+ draggableObj.labelEl.css(
+ 'top',
+ 5 + draggableObj.iconHeightSmall + 5
+ );
+ draggableObj.labelEl.appendTo(
+ draggableObj.containerEl
+ );
}
inContainer = true;
}
}
}
-
- // In firefox the event does not have a proper pageX and pageY
- // coordinates.
- function normalizeEvent(event) {
- if(!event.offsetX) {
- event.offsetX = (event.pageX - $(event.target).offset().left);
- event.offsetY = (event.pageY - $(event.target).offset().top);
- }
- return event;
- }
}
});
diff --git a/common/static/js/capa/drag_and_drop/main.js b/common/static/js/capa/drag_and_drop/main.js
index 0ccfb47051..ec186066c1 100644
--- a/common/static/js/capa/drag_and_drop/main.js
+++ b/common/static/js/capa/drag_and_drop/main.js
@@ -60,13 +60,22 @@ define(
Container(state);
BaseImage(state);
- Targets(state);
- Scroller(state);
- Draggables(state);
- // Update the input element, checking first that it is not filled with
- // an answer from the server.
- updateInput(state, true);
+ (function addContent() {
+ if (state.baseImageLoaded !== true) {
+ setTimeout(addContent, 50);
+
+ return;
+ }
+
+ Targets(state);
+ Scroller(state);
+ Draggables(state);
+
+ // Update the input element, checking first that it is not filled with
+ // an answer from the server.
+ updateInput(state, true);
+ }());
}
});
diff --git a/common/static/js/capa/drag_and_drop/state.js b/common/static/js/capa/drag_and_drop/state.js
index c3a4d3c4ac..99dd7dc8e4 100644
--- a/common/static/js/capa/drag_and_drop/state.js
+++ b/common/static/js/capa/drag_and_drop/state.js
@@ -11,10 +11,7 @@ define([], function () {
return {
'problemId': problemId,
- // Will indicate when all targetsand draggables have been loaded,
- // processed, and postioned intially.
- 'targetsLoaded': false,
- 'draggablesLoaded': false,
+ 'baseImageLoaded': false,
'numDraggablesInSlider': 0
};
diff --git a/common/static/js/capa/drag_and_drop/update_input.js b/common/static/js/capa/drag_and_drop/update_input.js
index df7c5edb2e..2c6a5ee364 100644
--- a/common/static/js/capa/drag_and_drop/update_input.js
+++ b/common/static/js/capa/drag_and_drop/update_input.js
@@ -39,7 +39,8 @@ define(['logme'], function (logme) {
for (c1 = 0; c1 < state.targets.length; c1++) {
for (c2 = 0; c2 < state.targets[c1].draggable.length; c2++) {
tempObj = {};
- tempObj[state.targets[c1].draggable[c2]] = state.targets[c1].id;
+ tempObj[state.targets[c1].draggable[c2]] =
+ state.targets[c1].id;
draggables.push(tempObj);
}
@@ -80,20 +81,37 @@ define(['logme'], function (logme) {
}
if (
- ((typeof answer.use_targets === 'boolean') && (answer.use_targets === true)) ||
- ((typeof answer.use_targets === 'string') && (answer.use_targets === 'true'))
+ (
+ (typeof answer.use_targets === 'boolean') &&
+ (answer.use_targets === true)
+ ) ||
+ (
+ (typeof answer.use_targets === 'string') &&
+ (answer.use_targets === 'true')
+ )
) {
for (c1 = 0; c1 < answer.draggables.length; c1++) {
for (draggableId in answer.draggables[c1]) {
- if ((draggable = getDraggableById(draggableId)) === null) {
- logme('ERROR: In answer there exists a draggable ID "' + draggableId + '". No draggable with this ID could be found.');
+ if (
+ (draggable = getDraggableById(draggableId)) ===
+ null
+ ) {
+ logme(
+ 'ERROR: In answer there exists a ' +
+ 'draggable ID "' + draggableId + '". No ' +
+ 'draggable with this ID could be found.'
+ );
continue;
}
targetId = answer.draggables[c1][draggableId];
if ((target = getTargetById(targetId)) === null) {
- logme('ERROR: In answer there exists a target ID "' + targetId + '". No target with this ID could be found.');
+ logme(
+ 'ERROR: In answer there exists a target ' +
+ 'ID "' + targetId + '". No target with this ' +
+ 'ID could be found.'
+ );
continue;
}
@@ -112,27 +130,44 @@ define(['logme'], function (logme) {
draggable.containerEl.hide();
draggable.iconEl.detach();
-
- draggable.iconEl.css('width', draggable.iconWidth);
- draggable.iconEl.css('height', draggable.iconHeight);
+ draggable.iconEl.css(
+ 'width',
+ draggable.iconWidth
+ );
+ draggable.iconEl.css(
+ 'height',
+ draggable.iconHeight
+ );
draggable.iconEl.css(
'left',
- target.offset.left + 0.5 * target.w - draggable.iconWidth * 0.5 + offset
+ target.offset.left + 0.5 * target.w -
+ draggable.iconWidth * 0.5 + offset
);
draggable.iconEl.css(
'top',
- target.offset.top + 0.5 * target.h - draggable.iconHeight * 0.5 + offset
+ target.offset.top + 0.5 * target.h -
+ draggable.iconHeight * 0.5 + offset
+ );
+ draggable.iconEl.appendTo(
+ state.baseImageEl.parent()
);
-
- draggable.iconEl.appendTo(state.baseImageEl.parent());
if (draggable.labelEl !== null) {
draggable.labelEl.detach();
-
- draggable.labelEl.css('left', target.offset.left + 0.5 * target.w - draggable.labelWidth * 0.5 + offset);
- draggable.labelEl.css('top', target.offset.top + 0.5 * target.h + draggable.iconHeight * 0.5 + 5 + offset);
-
- draggable.labelEl.appendTo(state.baseImageEl.parent());
+ draggable.labelEl.css(
+ 'left',
+ target.offset.left + 0.5 * target.w -
+ draggable.labelWidth * 0.5 + offset
+ );
+ draggable.labelEl.css(
+ 'top',
+ target.offset.top + 0.5 * target.h +
+ draggable.iconHeight * 0.5 + 5 +
+ offset
+ );
+ draggable.labelEl.appendTo(
+ state.baseImageEl.parent()
+ );
}
draggable.setOnTarget(target);
@@ -145,13 +180,26 @@ define(['logme'], function (logme) {
}
}
} else if (
- ((typeof answer.use_targets === 'boolean') && (answer.use_targets === false)) ||
- ((typeof answer.use_targets === 'string') && (answer.use_targets === 'false'))
+ (
+ (typeof answer.use_targets === 'boolean') &&
+ (answer.use_targets === false)
+ ) ||
+ (
+ (typeof answer.use_targets === 'string') &&
+ (answer.use_targets === 'false')
+ )
) {
for (c1 = 0; c1 < answer.draggables.length; c1++) {
for (draggableId in answer.draggables[c1]) {
- if ((draggable = getDraggableById(draggableId)) === null) {
- logme('ERROR: In answer there exists a draggable ID "' + draggableId + '". No draggable with this ID could be found.');
+ if (
+ (draggable = getDraggableById(draggableId)) ===
+ null
+ ) {
+ logme(
+ 'ERROR: In answer there exists a ' +
+ 'draggable ID "' + draggableId + '". No ' +
+ 'draggable with this ID could be found.'
+ );
continue;
}
@@ -170,31 +218,50 @@ define(['logme'], function (logme) {
draggable.containerEl.hide();
draggable.iconEl.detach();
-
- draggable.iconEl.css('width', draggable.iconWidth);
- draggable.iconEl.css('height', draggable.iconHeight);
+ draggable.iconEl.css(
+ 'width',
+ draggable.iconWidth
+ );
+ draggable.iconEl.css(
+ 'height',
+ draggable.iconHeight
+ );
draggable.iconEl.css(
'left',
- answer.draggables[c1][draggableId][0] - draggable.iconWidth * 0.5 + offset
+ answer.draggables[c1][draggableId][0] -
+ draggable.iconWidth * 0.5 + offset
);
draggable.iconEl.css(
'top',
- answer.draggables[c1][draggableId][1] - draggable.iconHeight * 0.5 + offset
+ answer.draggables[c1][draggableId][1] -
+ draggable.iconHeight * 0.5 + offset
+ );
+ draggable.iconEl.appendTo(
+ state.baseImageEl.parent()
);
-
- draggable.iconEl.appendTo(state.baseImageEl.parent());
if (draggable.labelEl !== null) {
draggable.labelEl.detach();
-
- draggable.labelEl.css('left', answer.draggables[c1][draggableId][0] - draggable.iconWidth * 0.5 - draggable.labelWidth * 0.5 + offset);
- draggable.labelEl.css('top', answer.draggables[c1][draggableId][1] - draggable.iconHeight * 0.5 + draggable.iconHeight + 5 + offset);
-
- draggable.labelEl.appendTo(state.baseImageEl.parent());
+ draggable.labelEl.css(
+ 'left',
+ answer.draggables[c1][draggableId][0] -
+ draggable.labelWidth * 0.5 + offset
+ );
+ draggable.labelEl.css(
+ 'top',
+ answer.draggables[c1][draggableId][1] -
+ draggable.iconHeight * 0.5 +
+ draggable.iconHeight + 5 + offset
+ );
+ draggable.labelEl.appendTo(
+ state.baseImageEl.parent()
+ );
}
- draggable.x = answer.draggables[c1][draggableId][0];
- draggable.y = answer.draggables[c1][draggableId][1];
+ draggable.x =
+ answer.draggables[c1][draggableId][0];
+ draggable.y =
+ answer.draggables[c1][draggableId][1];
state.numDraggablesInSlider -= 1;
state.updateArrowOpacity();
@@ -203,7 +270,10 @@ define(['logme'], function (logme) {
}
}
} else {
- logme('ERROR: The type of answer.targets is not supported. answer.targets = ', answer.targets);
+ logme(
+ 'ERROR: The type of answer.targets is not supported. ' +
+ 'answer.targets = ', answer.targets
+ );
return;
}