Skip to content

E
edx-platform
Commit 98172538 by Valera Rozuvan Committed by Alexander Kryklia
Options

Fixed problem with smaller and larger base images. Refactoring. Cleaning of code.

parent ad0a7d30
Showing with 352 additions and 113 deletions
common/static/js/capa/drag_and_drop/base_image.js
...@@ -16,18 +16,26 @@ define(['logme'], function (logme) { ...@@ -16,18 +16,26 @@ define(['logme'], function (logme) {
'style=" ' + 'style=" ' +
'position: relative; ' + 'position: relative; ' +
'margin-bottom: 25px; ' + 'margin-bottom: 25px; ' +
'margin-left: auto; ' +
'margin-right: auto; ' +
'" ' + '" ' +
'></div>' '></div>'
); );
state.baseImageEl = $( state.baseImageEl = $('<img />');
'<img ' + state.baseImageEl.attr(
'src="' + state.config.imageDir + '/' + state.config.base_image + '" ' + '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);
state.baseImageEl.appendTo(baseImageElContainer);
baseImageElContainer.appendTo(state.containerEl); baseImageElContainer.appendTo(state.containerEl);
state.baseImageLoaded = true;
});
} }
}); });
......
common/static/js/capa/drag_and_drop/draggables.js
...@@ -21,8 +21,6 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -21,8 +21,6 @@ define(['logme', 'update_input'], function (logme, updateInput) {
state.currentMovingDraggable = null; state.currentMovingDraggable = null;
$(document).mousemove(function (event) { $(document).mousemove(function (event) {
normalizeEvent(event);
if (state.currentMovingDraggable !== null) { if (state.currentMovingDraggable !== null) {
state.currentMovingDraggable.iconEl.css( state.currentMovingDraggable.iconEl.css(
'left', 'left',
...@@ -39,18 +37,18 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -39,18 +37,18 @@ define(['logme', 'update_input'], function (logme, updateInput) {
if (state.currentMovingDraggable.labelEl !== null) { if (state.currentMovingDraggable.labelEl !== null) {
state.currentMovingDraggable.labelEl.css( state.currentMovingDraggable.labelEl.css(
'left',
event.pageX -
state.baseImageEl.offset().left -
state.currentMovingDraggable.labelWidth * 0.5
);
state.currentMovingDraggable.labelEl.css(
'top', 'top',
event.pageY - event.pageY -
state.baseImageEl.offset().top + state.baseImageEl.offset().top +
state.currentMovingDraggable.iconHeight * 0.5 + state.currentMovingDraggable.iconHeight * 0.5 +
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) { ...@@ -99,23 +97,39 @@ define(['logme', 'update_input'], function (logme, updateInput) {
if (draggableObj.iconWidth >= draggableObj.iconHeight) { if (draggableObj.iconWidth >= draggableObj.iconHeight) {
draggableObj.iconWidthSmall = 60; draggableObj.iconWidthSmall = 60;
draggableObj.iconHeightSmall = draggableObj.iconWidthSmall * (draggableObj.iconHeight / draggableObj.iconWidth); draggableObj.iconHeightSmall =
draggableObj.iconWidthSmall *
(draggableObj.iconHeight / draggableObj.iconWidth);
} else { } else {
draggableObj.iconHeightSmall = 60; 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('position', 'absolute');
draggableObj.iconEl.css('width', draggableObj.iconWidthSmall); draggableObj.iconEl.css(
draggableObj.iconEl.css('height', draggableObj.iconHeightSmall); '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) { if (obj.label.length > 0) {
draggableObj.iconEl.css('top', 5); draggableObj.iconEl.css('top', 5);
} else { } else {
draggableObj.iconEl.css('top', 50 - draggableObj.iconHeightSmall * 0.5); draggableObj.iconEl.css(
'top',
50 - draggableObj.iconHeightSmall * 0.5
);
} }
draggableObj.iconEl.appendTo(draggableObj.containerEl); draggableObj.iconEl.appendTo(draggableObj.containerEl);
...@@ -131,12 +145,20 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -131,12 +145,20 @@ define(['logme', 'update_input'], function (logme, updateInput) {
'</div>' '</div>'
); );
draggableObj.labelEl.appendTo(draggableObj.containerEl); draggableObj.labelEl.appendTo(
draggableObj.containerEl
);
draggableObj.labelWidth = draggableObj.labelEl.width(); draggableObj.labelWidth = draggableObj.labelEl.width();
draggableObj.labelEl.css('left', 50 - draggableObj.labelWidth * 0.5); draggableObj.labelEl.css(
draggableObj.labelEl.css('top', 5 + draggableObj.iconHeightSmall + 5); 'left',
50 - draggableObj.labelWidth * 0.5
);
draggableObj.labelEl.css(
'top',
5 + draggableObj.iconHeightSmall + 5
);
draggableObj.labelEl.mousedown(mouseDown); draggableObj.labelEl.mousedown(mouseDown);
draggableObj.labelEl.mouseup(mouseUp); draggableObj.labelEl.mouseup(mouseUp);
...@@ -168,8 +190,14 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -168,8 +190,14 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.iconWidthSmall = draggableObj.iconWidth; draggableObj.iconWidthSmall = draggableObj.iconWidth;
draggableObj.iconHeightSmall = draggableObj.iconHeight; draggableObj.iconHeightSmall = draggableObj.iconHeight;
draggableObj.iconEl.css('left', 50 - draggableObj.iconWidthSmall * 0.5); draggableObj.iconEl.css(
draggableObj.iconEl.css('top', 50 - draggableObj.iconHeightSmall * 0.5); 'left',
50 - draggableObj.iconWidthSmall * 0.5
);
draggableObj.iconEl.css(
'top',
50 - draggableObj.iconHeightSmall * 0.5
);
} else { } else {
// If no icon and no label, don't create a draggable. // If no icon and no label, don't create a draggable.
return; return;
...@@ -189,8 +217,12 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -189,8 +217,12 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.x = -1; draggableObj.x = -1;
draggableObj.y = -1; draggableObj.y = -1;
draggableObj.setInContainer = function (val) { inContainer = val; }; draggableObj.setInContainer = function (val) {
draggableObj.setOnTarget = function (val) { onTarget = val; }; inContainer = val;
};
draggableObj.setOnTarget = function (val) {
onTarget = val;
};
state.draggables.push(draggableObj); state.draggables.push(draggableObj);
...@@ -204,26 +236,58 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -204,26 +236,58 @@ define(['logme', 'update_input'], function (logme, updateInput) {
function mouseDown(event) { function mouseDown(event) {
if (mousePressed === false) { if (mousePressed === false) {
state.currentMovingDraggable = draggableObj; // So that the browser does not perform a default drag.
normalizeEvent(event); // 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) { if (inContainer === true) {
draggableObj.containerEl.hide(); draggableObj.containerEl.hide();
draggableObj.iconEl.detach(); draggableObj.iconEl.detach();
draggableObj.iconEl.css(
draggableObj.iconEl.css('width', draggableObj.iconWidth); 'width',
draggableObj.iconEl.css('height', draggableObj.iconHeight); draggableObj.iconWidth
);
draggableObj.iconEl.css('left', event.pageX - state.baseImageEl.offset().left - draggableObj.iconWidth * 0.5); draggableObj.iconEl.css(
draggableObj.iconEl.css('top', event.pageY - state.baseImageEl.offset().top - draggableObj.iconHeight * 0.5); 'height',
draggableObj.iconEl.appendTo(state.baseImageEl.parent()); 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) { if (draggableObj.labelEl !== null) {
draggableObj.labelEl.detach(); draggableObj.labelEl.detach();
draggableObj.labelEl.css('left', event.pageX - state.baseImageEl.offset().left - draggableObj.labelWidth * 0.5); draggableObj.labelEl.css(
draggableObj.labelEl.css('top', event.pageY - state.baseImageEl.offset().top + draggableObj.iconHeight * 0.5 + 5); 'left',
draggableObj.labelEl.appendTo(state.baseImageEl.parent()); 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; inContainer = false;
...@@ -235,7 +299,7 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -235,7 +299,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.iconEl.css('z-index', '1000'); draggableObj.iconEl.css('z-index', '1000');
mousePressed = true; mousePressed = true;
event.preventDefault(); state.currentMovingDraggable = draggableObj;
} }
} }
...@@ -249,8 +313,42 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -249,8 +313,42 @@ define(['logme', 'update_input'], function (logme, updateInput) {
function mouseMove() { function mouseMove() {
if (mousePressed === true) { if (mousePressed === true) {
draggableObj.iconEl.css('left', event.pageX - state.baseImageEl.offset().left - draggableObj.iconWidth * 0.5); // Because we have also attached a 'mousemove' event to the
draggableObj.iconEl.css('top', event.pageY - state.baseImageEl.offset().top - draggableObj.iconHeight * 0.5); // '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) { ...@@ -280,11 +378,22 @@ define(['logme', 'update_input'], function (logme, updateInput) {
state.numDraggablesInSlider += 1; state.numDraggablesInSlider += 1;
} }
} else { } else {
logme(
'baseImageEl.width = ' + state.baseImageEl.width() + '; ' +
'baseImageEl.height = ' + state.baseImageEl.height()
);
if ( if (
(offsetIE.left < 0) || (offsetIE.left < 0) ||
(offsetIE.left + draggableObj.iconWidth > state.baseImageEl.width()) || (
offsetIE.left + draggableObj.iconWidth >
state.baseImageEl.width()
) ||
(offsetIE.top < 0) || (offsetIE.top < 0) ||
(offsetIE.top + draggableObj.iconHeight > state.baseImageEl.height()) (
offsetIE.top + draggableObj.iconHeight >
state.baseImageEl.height()
)
) { ) {
moveBackToSlider(); moveBackToSlider();
...@@ -295,8 +404,10 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -295,8 +404,10 @@ define(['logme', 'update_input'], function (logme, updateInput) {
} else { } else {
correctZIndexes(); correctZIndexes();
draggableObj.x = offsetIE.left + draggableObj.iconWidth * 0.5; draggableObj.x =
draggableObj.y = offsetIE.top + draggableObj.iconHeight * 0.5; 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) { ...@@ -331,16 +442,28 @@ define(['logme', 'update_input'], function (logme, updateInput) {
for (c1 = 0; c1 < state.targets.length; c1 += 1) { for (c1 = 0; c1 < state.targets.length; c1 += 1) {
target = state.targets[c1]; 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; 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; continue;
} }
if (offsetIE.left + draggableObj.iconWidth * 0.5 < target.offset.left) { if (
offsetIE.left + draggableObj.iconWidth * 0.5 <
target.offset.left
) {
continue; 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; continue;
} }
...@@ -358,7 +481,10 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -358,7 +481,10 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// another, then we need to remove it's ID from the // another, then we need to remove it's ID from the
// previous target's draggables list, and add it to the // previous target's draggables list, and add it to the
// new target's draggables list. // new target's draggables list.
if ((onTarget !== null) && (onTarget.id !== target.id)) { if (
(onTarget !== null) &&
(onTarget.id !== target.id)
) {
removeObjIdFromTarget(); removeObjIdFromTarget();
onTarget = target; onTarget = target;
target.draggable.push(draggableObj.id); target.draggable.push(draggableObj.id);
...@@ -383,12 +509,28 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -383,12 +509,28 @@ define(['logme', 'update_input'], function (logme, updateInput) {
offset = 1; offset = 1;
} }
draggableObj.iconEl.css('left', target.offset.left + 0.5 * target.w - draggableObj.iconWidth * 0.5 + offset); draggableObj.iconEl.css(
draggableObj.iconEl.css('top', target.offset.top + 0.5 * target.h - draggableObj.iconHeight * 0.5 + offset); '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) { if (draggableObj.labelEl !== null) {
draggableObj.labelEl.css('left', target.offset.left + 0.5 * target.w - draggableObj.labelWidth * 0.5 + offset); draggableObj.labelEl.css(
draggableObj.labelEl.css('top', target.offset.top + 0.5 * target.h + draggableObj.iconHeight * 0.5 + 5 + offset); '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) { ...@@ -406,7 +548,10 @@ define(['logme', 'update_input'], function (logme, updateInput) {
var c1; var c1;
for (c1 = 0; c1 < state.draggables.length; 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].zIndex -= 1;
state.draggables[c1].iconEl.css( state.draggables[c1].iconEl.css(
'z-index', 'z-index',
...@@ -427,40 +572,50 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -427,40 +572,50 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.iconEl.detach(); draggableObj.iconEl.detach();
draggableObj.iconEl.css('width', draggableObj.iconWidthSmall); draggableObj.iconEl.css(
draggableObj.iconEl.css('height', draggableObj.iconHeightSmall); '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) { if (draggableObj.labelEl !== null) {
draggableObj.iconEl.css('top', 5); draggableObj.iconEl.css('top', 5);
} else { } else {
draggableObj.iconEl.css('top', 50 - draggableObj.iconHeightSmall * 0.5); draggableObj.iconEl.css(
'top',
50 - draggableObj.iconHeightSmall * 0.5
);
} }
draggableObj.iconEl.appendTo(draggableObj.containerEl); draggableObj.iconEl.appendTo(draggableObj.containerEl);
if (draggableObj.labelEl !== null) { if (draggableObj.labelEl !== null) {
draggableObj.labelEl.detach(); draggableObj.labelEl.detach();
draggableObj.labelEl.css('left', 50 - draggableObj.labelWidth * 0.5); draggableObj.labelEl.css(
draggableObj.labelEl.css('top', 5 + draggableObj.iconHeightSmall + 5); 'left',
draggableObj.labelEl.appendTo(draggableObj.containerEl); 50 - draggableObj.labelWidth * 0.5
);
draggableObj.labelEl.css(
'top',
5 + draggableObj.iconHeightSmall + 5
);
draggableObj.labelEl.appendTo(
draggableObj.containerEl
);
} }
inContainer = true; 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;
}
} }
}); });
......
common/static/js/capa/drag_and_drop/main.js
...@@ -60,6 +60,14 @@ define( ...@@ -60,6 +60,14 @@ define(
Container(state); Container(state);
BaseImage(state); BaseImage(state);
(function addContent() {
if (state.baseImageLoaded !== true) {
setTimeout(addContent, 50);
return;
}
Targets(state); Targets(state);
Scroller(state); Scroller(state);
Draggables(state); Draggables(state);
...@@ -67,6 +75,7 @@ define( ...@@ -67,6 +75,7 @@ define(
// Update the input element, checking first that it is not filled with // Update the input element, checking first that it is not filled with
// an answer from the server. // an answer from the server.
updateInput(state, true); updateInput(state, true);
}());
} }
}); });
......
common/static/js/capa/drag_and_drop/state.js
...@@ -11,10 +11,7 @@ define([], function () { ...@@ -11,10 +11,7 @@ define([], function () {
return { return {
'problemId': problemId, 'problemId': problemId,
// Will indicate when all targetsand draggables have been loaded, 'baseImageLoaded': false,
// processed, and postioned intially.
'targetsLoaded': false,
'draggablesLoaded': false,
'numDraggablesInSlider': 0 'numDraggablesInSlider': 0
}; };
......
common/static/js/capa/drag_and_drop/update_input.js
...@@ -39,7 +39,8 @@ define(['logme'], function (logme) { ...@@ -39,7 +39,8 @@ define(['logme'], function (logme) {
for (c1 = 0; c1 < state.targets.length; c1++) { for (c1 = 0; c1 < state.targets.length; c1++) {
for (c2 = 0; c2 < state.targets[c1].draggable.length; c2++) { for (c2 = 0; c2 < state.targets[c1].draggable.length; c2++) {
tempObj = {}; tempObj = {};
tempObj[state.targets[c1].draggable[c2]] = state.targets[c1].id; tempObj[state.targets[c1].draggable[c2]] =
state.targets[c1].id;
draggables.push(tempObj); draggables.push(tempObj);
} }
...@@ -80,20 +81,37 @@ define(['logme'], function (logme) { ...@@ -80,20 +81,37 @@ define(['logme'], function (logme) {
} }
if ( 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 (c1 = 0; c1 < answer.draggables.length; c1++) {
for (draggableId in answer.draggables[c1]) { for (draggableId in answer.draggables[c1]) {
if ((draggable = getDraggableById(draggableId)) === null) { if (
logme('ERROR: In answer there exists a draggable ID "' + draggableId + '". No draggable with this ID could be found.'); (draggable = getDraggableById(draggableId)) ===
null
) {
logme(
'ERROR: In answer there exists a ' +
'draggable ID "' + draggableId + '". No ' +
'draggable with this ID could be found.'
);
continue; continue;
} }
targetId = answer.draggables[c1][draggableId]; targetId = answer.draggables[c1][draggableId];
if ((target = getTargetById(targetId)) === null) { 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; continue;
} }
...@@ -112,27 +130,44 @@ define(['logme'], function (logme) { ...@@ -112,27 +130,44 @@ define(['logme'], function (logme) {
draggable.containerEl.hide(); draggable.containerEl.hide();
draggable.iconEl.detach(); draggable.iconEl.detach();
draggable.iconEl.css(
draggable.iconEl.css('width', draggable.iconWidth); 'width',
draggable.iconEl.css('height', draggable.iconHeight); draggable.iconWidth
);
draggable.iconEl.css(
'height',
draggable.iconHeight
);
draggable.iconEl.css( draggable.iconEl.css(
'left', '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( draggable.iconEl.css(
'top', '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) { if (draggable.labelEl !== null) {
draggable.labelEl.detach(); draggable.labelEl.detach();
draggable.labelEl.css(
draggable.labelEl.css('left', target.offset.left + 0.5 * target.w - draggable.labelWidth * 0.5 + offset); 'left',
draggable.labelEl.css('top', target.offset.top + 0.5 * target.h + draggable.iconHeight * 0.5 + 5 + offset); target.offset.left + 0.5 * target.w -
draggable.labelWidth * 0.5 + offset
draggable.labelEl.appendTo(state.baseImageEl.parent()); );
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); draggable.setOnTarget(target);
...@@ -145,13 +180,26 @@ define(['logme'], function (logme) { ...@@ -145,13 +180,26 @@ define(['logme'], function (logme) {
} }
} }
} else if ( } 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 (c1 = 0; c1 < answer.draggables.length; c1++) {
for (draggableId in answer.draggables[c1]) { for (draggableId in answer.draggables[c1]) {
if ((draggable = getDraggableById(draggableId)) === null) { if (
logme('ERROR: In answer there exists a draggable ID "' + draggableId + '". No draggable with this ID could be found.'); (draggable = getDraggableById(draggableId)) ===
null
) {
logme(
'ERROR: In answer there exists a ' +
'draggable ID "' + draggableId + '". No ' +
'draggable with this ID could be found.'
);
continue; continue;
} }
...@@ -170,31 +218,50 @@ define(['logme'], function (logme) { ...@@ -170,31 +218,50 @@ define(['logme'], function (logme) {
draggable.containerEl.hide(); draggable.containerEl.hide();
draggable.iconEl.detach(); draggable.iconEl.detach();
draggable.iconEl.css(
draggable.iconEl.css('width', draggable.iconWidth); 'width',
draggable.iconEl.css('height', draggable.iconHeight); draggable.iconWidth
);
draggable.iconEl.css(
'height',
draggable.iconHeight
);
draggable.iconEl.css( draggable.iconEl.css(
'left', 'left',
answer.draggables[c1][draggableId][0] - draggable.iconWidth * 0.5 + offset answer.draggables[c1][draggableId][0] -
draggable.iconWidth * 0.5 + offset
); );
draggable.iconEl.css( draggable.iconEl.css(
'top', '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) { if (draggable.labelEl !== null) {
draggable.labelEl.detach(); draggable.labelEl.detach();
draggable.labelEl.css(
draggable.labelEl.css('left', answer.draggables[c1][draggableId][0] - draggable.iconWidth * 0.5 - draggable.labelWidth * 0.5 + offset); 'left',
draggable.labelEl.css('top', answer.draggables[c1][draggableId][1] - draggable.iconHeight * 0.5 + draggable.iconHeight + 5 + offset); answer.draggables[c1][draggableId][0] -
draggable.labelWidth * 0.5 + offset
draggable.labelEl.appendTo(state.baseImageEl.parent()); );
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.x =
draggable.y = answer.draggables[c1][draggableId][1]; answer.draggables[c1][draggableId][0];
draggable.y =
answer.draggables[c1][draggableId][1];
state.numDraggablesInSlider -= 1; state.numDraggablesInSlider -= 1;
state.updateArrowOpacity(); state.updateArrowOpacity();
...@@ -203,7 +270,10 @@ define(['logme'], function (logme) { ...@@ -203,7 +270,10 @@ define(['logme'], function (logme) {
} }
} }
} else { } 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; return;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment