Skip to content

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

Refactoring. New feature: adding multiple draggables from one.

parent e2bbaf08
Showing with 274 additions and 266 deletions
common/static/js/capa/drag_and_drop/draggables.js
...@@ -5,22 +5,32 @@ ...@@ -5,22 +5,32 @@
(function (requirejs, require, define) { (function (requirejs, require, define) {
define(['logme', 'update_input'], function (logme, updateInput) { define(['logme', 'update_input'], function (logme, updateInput) {
return Draggables; return {
'init': init
};
function Draggables(state) { function init(state) {
var c1; logme('Draggables.init; state = ', state);
state.draggables = []; state.draggables = [];
state.numDraggablesInSlider = 0; state.numDraggablesInSlider = 0;
state.currentMovingDraggable = null;
for (c1 = 0; c1 < state.config.draggables.length; c1 += 1) { (function (c1) {
processDraggable(state.config.draggables[c1], c1 + 1); while (c1 < state.config.draggables.length) {
processDraggable(state, state.config.draggables[c1], c1 + 1);
c1 += 1
} }
}(0));
state.updateArrowOpacity(); state.updateArrowOpacity();
state.currentMovingDraggable = null;
$(document).mousemove(function (event) { $(document).mousemove(function (event) {
documentMouseMove(state, event);
});
}
function documentMouseMove(state, event) {
if (state.currentMovingDraggable !== null) { if (state.currentMovingDraggable !== null) {
state.currentMovingDraggable.iconEl.css( state.currentMovingDraggable.iconEl.css(
'left', 'left',
...@@ -53,18 +63,35 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -53,18 +63,35 @@ define(['logme', 'update_input'], function (logme, updateInput) {
); );
} }
} }
}); }
return; function processDraggable(state, obj, objIndex) {
var draggableObj;
logme('processDraggable; state = ', state);
function processDraggable(obj, objIndex) { logme('Processing draggable #' + objIndex);
var inContainer, mousePressed, onTarget, draggableObj;
draggableObj = { draggableObj = {
'zIndex': objIndex, 'zIndex': objIndex,
'oldZIndex': objIndex, 'oldZIndex': objIndex,
'labelEl': null, 'labelEl': null,
'hasLoaded': false 'hasLoaded': false,
'inContainer': true,
'mousePressed': false,
'onTarget': null,
'state': state,
'mouseDown': mouseDown,
'mouseUp': mouseUp,
'mouseMove': mouseMove,
'checkLandingElement': checkLandingElement,
'removeObjIdFromTarget': removeObjIdFromTarget,
'checkIfOnTarget': checkIfOnTarget,
'snapToTarget': snapToTarget,
'correctZIndexes': correctZIndexes,
'moveBackToSlider': moveBackToSlider
}; };
draggableObj.containerEl = $( draggableObj.containerEl = $(
...@@ -169,9 +196,15 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -169,9 +196,15 @@ define(['logme', 'update_input'], function (logme, updateInput) {
5 + draggableObj.iconHeightSmall + 5 5 + draggableObj.iconHeightSmall + 5
); );
draggableObj.labelEl.mousedown(mouseDown); draggableObj.labelEl.mousedown(function (event) {
draggableObj.labelEl.mouseup(mouseUp); draggableObj.mouseDown.call(draggableObj, event);
draggableObj.labelEl.mousemove(mouseMove); });
draggableObj.labelEl.mouseup(function (event) {
draggableObj.mouseUp.call(draggableObj, event);
});
draggableObj.labelEl.mousemove(function (event) {
draggableObj.mouseMove.call(draggableObj, event);
});
} }
draggableObj.hasLoaded = true; draggableObj.hasLoaded = true;
...@@ -221,42 +254,41 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -221,42 +254,41 @@ define(['logme', 'update_input'], function (logme, updateInput) {
} }
} }
draggableObj.iconEl.mousedown(mouseDown); draggableObj.iconEl.mousedown(function (event) {
draggableObj.iconEl.mouseup(mouseUp); draggableObj.mouseDown.call(draggableObj, event);
draggableObj.iconEl.mousemove(mouseMove); });
draggableObj.iconEl.mouseup(function (event) {
draggableObj.containerEl.mousedown(mouseDown); draggableObj.mouseUp.call(draggableObj, event);
draggableObj.containerEl.mouseup(mouseUp); });
draggableObj.containerEl.mousemove(mouseMove); draggableObj.iconEl.mousemove(function (event) {
draggableObj.mouseMove.call(draggableObj, event);
inContainer = true; });
mousePressed = false;
onTarget = null; draggableObj.containerEl.mousedown(function (event) {
draggableObj.mouseDown.call(draggableObj, event);
});
draggableObj.containerEl.mouseup(function (event) {
draggableObj.mouseUp.call(draggableObj, event);
});
draggableObj.containerEl.mousemove(function (event) {
draggableObj.mouseMove.call(draggableObj, event);
});
draggableObj.id = obj.id; draggableObj.id = obj.id;
draggableObj.x = -1; draggableObj.x = -1;
draggableObj.y = -1; draggableObj.y = -1;
draggableObj.setInContainer = function (val) {
inContainer = val;
};
draggableObj.setOnTarget = function (val) {
onTarget = val;
};
state.draggables.push(draggableObj);
state.numDraggablesInSlider += 1; state.numDraggablesInSlider += 1;
if (obj.icon.length === 0) { if (obj.icon.length === 0) {
draggableObj.hasLoaded = true; draggableObj.hasLoaded = true;
} }
return; state.draggables.push(draggableObj);
}
function mouseDown(event) { function mouseDown(event) {
if (mousePressed === false) { if (this.mousePressed === false) {
// So that the browser does not perform a default drag. // So that the browser does not perform a default drag.
// If we don't do this, each drag operation will // If we don't do this, each drag operation will
// potentially cause the highlghting of the dragged element. // potentially cause the highlghting of the dragged element.
...@@ -264,105 +296,105 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -264,105 +296,105 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// If this draggable is just being dragged out of the // If this draggable is just being dragged out of the
// container, we must perform some additional tasks. // container, we must perform some additional tasks.
if (inContainer === true) { if (this.inContainer === true) {
draggableObj.containerEl.hide(); this.containerEl.hide();
draggableObj.iconEl.detach(); this.iconEl.detach();
draggableObj.iconEl.css( this.iconEl.css(
'background-color', draggableObj.iconElBGColor 'background-color', this.iconElBGColor
); );
draggableObj.iconEl.css( this.iconEl.css(
'padding-left', draggableObj.iconElPadding 'padding-left', this.iconElPadding
); );
draggableObj.iconEl.css( this.iconEl.css(
'padding-right', draggableObj.iconElPadding 'padding-right', this.iconElPadding
); );
draggableObj.iconEl.css( this.iconEl.css(
'border', draggableObj.iconElBorder 'border', this.iconElBorder
); );
draggableObj.iconEl.css( this.iconEl.css(
'width', 'width',
draggableObj.iconWidth this.iconWidth
); );
draggableObj.iconEl.css( this.iconEl.css(
'height', 'height',
draggableObj.iconHeight this.iconHeight
); );
draggableObj.iconEl.css( this.iconEl.css(
'left', 'left',
event.pageX - event.pageX -
state.baseImageEl.offset().left - this.state.baseImageEl.offset().left -
draggableObj.iconWidth * 0.5 this.iconWidth * 0.5
- draggableObj.iconElLeftOffset - this.iconElLeftOffset
); );
draggableObj.iconEl.css( this.iconEl.css(
'top', 'top',
event.pageY - event.pageY -
state.baseImageEl.offset().top - this.state.baseImageEl.offset().top -
draggableObj.iconHeight * 0.5 this.iconHeight * 0.5
); );
draggableObj.iconEl.appendTo( this.iconEl.appendTo(
state.baseImageEl.parent() state.baseImageEl.parent()
); );
if (draggableObj.labelEl !== null) { if (this.labelEl !== null) {
draggableObj.labelEl.detach(); this.labelEl.detach();
draggableObj.labelEl.css( this.labelEl.css(
'background-color', state.config.labelBgColor 'background-color', this.state.config.labelBgColor
); );
draggableObj.labelEl.css( this.labelEl.css(
'padding-left', 8 'padding-left', 8
); );
draggableObj.labelEl.css( this.labelEl.css(
'padding-right', 8 'padding-right', 8
); );
draggableObj.labelEl.css( this.labelEl.css(
'border', '1px solid black' 'border', '1px solid black'
); );
draggableObj.labelEl.css( this.labelEl.css(
'left', 'left',
event.pageX - event.pageX -
state.baseImageEl.offset().left - this.state.baseImageEl.offset().left -
draggableObj.labelWidth * 0.5 this.labelWidth * 0.5
- 9 // Account for padding, border. - 9 // Account for padding, border.
); );
draggableObj.labelEl.css( this.labelEl.css(
'top', 'top',
event.pageY - event.pageY -
state.baseImageEl.offset().top + this.state.baseImageEl.offset().top +
draggableObj.iconHeight * 0.5 + 5 this.iconHeight * 0.5 + 5
); );
draggableObj.labelEl.appendTo( this.labelEl.appendTo(
state.baseImageEl.parent() this.state.baseImageEl.parent()
); );
} }
inContainer = false; this.inContainer = false;
state.numDraggablesInSlider -= 1; this.state.numDraggablesInSlider -= 1;
} }
draggableObj.oldZIndex = draggableObj.zIndex; this.oldZIndex = this.zIndex;
draggableObj.zIndex = 1000; this.zIndex = 1000;
draggableObj.iconEl.css('z-index', '1000'); this.iconEl.css('z-index', '1000');
if (draggableObj.labelEl !== null) { if (this.labelEl !== null) {
draggableObj.labelEl.css('z-index', '1000'); this.labelEl.css('z-index', '1000');
} }
mousePressed = true; this.mousePressed = true;
state.currentMovingDraggable = draggableObj; this.state.currentMovingDraggable = this;
} }
} }
function mouseUp() { function mouseUp() {
if (mousePressed === true) { if (this.mousePressed === true) {
state.currentMovingDraggable = null; this.state.currentMovingDraggable = null;
checkLandingElement(); this.checkLandingElement();
} }
} }
function mouseMove() { function mouseMove() {
if (mousePressed === true) { if (this.mousePressed === true) {
// Because we have also attached a 'mousemove' event to the // Because we have also attached a 'mousemove' event to the
// 'document' (that will do the same thing), let's tell the // 'document' (that will do the same thing), let's tell the
// browser not to bubble up this event. The attached event // browser not to bubble up this event. The attached event
...@@ -371,33 +403,33 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -371,33 +403,33 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// of a drag operation (user moves the mouse very quickly). // of a drag operation (user moves the mouse very quickly).
event.stopPropagation(); event.stopPropagation();
draggableObj.iconEl.css( this.iconEl.css(
'left', 'left',
event.pageX - event.pageX -
state.baseImageEl.offset().left - this.state.baseImageEl.offset().left -
draggableObj.iconWidth * 0.5 this.iconWidth * 0.5
- draggableObj.iconElLeftOffset - this.iconElLeftOffset
); );
draggableObj.iconEl.css( this.iconEl.css(
'top', 'top',
event.pageY - event.pageY -
state.baseImageEl.offset().top - this.state.baseImageEl.offset().top -
draggableObj.iconHeight * 0.5 this.iconHeight * 0.5
); );
if (draggableObj.labelEl !== null) { if (this.labelEl !== null) {
draggableObj.labelEl.css( this.labelEl.css(
'left', 'left',
event.pageX - event.pageX -
state.baseImageEl.offset().left - this.state.baseImageEl.offset().left -
draggableObj.labelWidth * 0.5 this.labelWidth * 0.5
- 9 // Acoount for padding, border. - 9 // Acoount for padding, border.
); );
draggableObj.labelEl.css( this.labelEl.css(
'top', 'top',
event.pageY - event.pageY -
state.baseImageEl.offset().top + this.state.baseImageEl.offset().top +
draggableObj.iconHeight * 0.5 + this.iconHeight * 0.5 +
5 5
); );
} }
...@@ -410,75 +442,70 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -410,75 +442,70 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// the input with the user's answer (X-Y position of the draggable, // the input with the user's answer (X-Y position of the draggable,
// or the ID of the target where it landed. // or the ID of the target where it landed.
function checkLandingElement() { function checkLandingElement() {
var positionIE, targetFound; var positionIE;
mousePressed = false; this.mousePressed = false;
positionIE = draggableObj.iconEl.position(); positionIE = this.iconEl.position();
if (state.individualTargets === true) { if (this.state.individualTargets === true) {
targetFound = false; if (this.checkIfOnTarget(positionIE) === true) {
this.correctZIndexes();
checkIfOnTarget();
if (targetFound === true) {
correctZIndexes();
} else { } else {
moveBackToSlider(); this.moveBackToSlider();
removeObjIdFromTarget(); this.removeObjIdFromTarget();
state.numDraggablesInSlider += 1; this.state.numDraggablesInSlider += 1;
} }
} else { } else {
if ( if (
(positionIE.left < 0) || (positionIE.left < 0) ||
( (
positionIE.left + draggableObj.iconWidth > positionIE.left + this.iconWidth >
state.baseImageEl.width() this.state.baseImageEl.width()
) || ) ||
(positionIE.top < 0) || (positionIE.top < 0) ||
( (
positionIE.top + draggableObj.iconHeight > positionIE.top + this.iconHeight >
state.baseImageEl.height() this.state.baseImageEl.height()
) )
) { ) {
moveBackToSlider(); this.moveBackToSlider();
draggableObj.x = -1; this.x = -1;
draggableObj.y = -1; this.y = -1;
state.numDraggablesInSlider += 1; this.state.numDraggablesInSlider += 1;
} else { } else {
correctZIndexes(); this.correctZIndexes();
draggableObj.x = this.x =
positionIE.left + draggableObj.iconWidth * 0.5; positionIE.left + this.iconWidth * 0.5;
draggableObj.y = this.y =
positionIE.top + draggableObj.iconHeight * 0.5; positionIE.top + this.iconHeight * 0.5;
} }
} }
state.updateArrowOpacity(); this.state.updateArrowOpacity();
updateInput(state); updateInput(this.state);
}
return;
function removeObjIdFromTarget() { function removeObjIdFromTarget() {
var c1; var c1;
if (onTarget !== null) { if (this.onTarget !== null) {
for (c1 = 0; c1 < onTarget.draggable.length; c1 += 1) { for (c1 = 0; c1 < this.onTarget.draggable.length; c1 += 1) {
if (onTarget.draggable[c1] === draggableObj.id) { if (this.onTarget.draggable[c1] === this.id) {
onTarget.draggable.splice(c1, 1); this.onTarget.draggable.splice(c1, 1);
break; break;
} }
} }
if (onTarget.numTextEl !== null) { if (this.onTarget.numTextEl !== null) {
onTarget.updateNumTextEl(); this.onTarget.updateNumTextEl();
} }
onTarget = null; this.onTarget = null;
} }
} }
...@@ -490,22 +517,24 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -490,22 +517,24 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// //
// positionIE is the object as returned by // positionIE is the object as returned by
// //
// draggableObj.iconEl.position() // this.iconEl.position()
// //
function checkIfOnTarget() { function checkIfOnTarget(positionIE) {
var c1, target; var c1, target, targetFound;
for (c1 = 0; c1 < state.targets.length; c1 += 1) { targetFound = false;
target = state.targets[c1];
for (c1 = 0; c1 < this.state.targets.length; c1 += 1) {
target = this.state.targets[c1];
// If only one draggable per target is allowed, and // If only one draggable per target is allowed, and
// the current target already has a draggable on it // the current target already has a draggable on it
// (with an ID different from the one we are checking // (with an ID different from the one we are checking
// against), then go to next target. // against), then go to next target.
if ( if (
(state.config.one_per_target === true) && (this.state.config.one_per_target === true) &&
(target.draggable.length === 1) && (target.draggable.length === 1) &&
(target.draggable[0] !== draggableObj.id) (target.draggable[0] !== this.id)
) { ) {
continue; continue;
} }
...@@ -513,25 +542,25 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -513,25 +542,25 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// Check if the draggable's center coordinate is within // Check if the draggable's center coordinate is within
// the target's dimensions. If not, go to next target. // the target's dimensions. If not, go to next target.
if ( if (
positionIE.top + draggableObj.iconHeight * 0.5 < positionIE.top + this.iconHeight * 0.5 <
target.offset.top target.offset.top
) { ) {
continue; continue;
} }
if ( if (
positionIE.top + draggableObj.iconHeight * 0.5 > positionIE.top + this.iconHeight * 0.5 >
target.offset.top + target.h target.offset.top + target.h
) { ) {
continue; continue;
} }
if ( if (
positionIE.left + draggableObj.iconWidth * 0.5 < positionIE.left + this.iconWidth * 0.5 <
target.offset.left target.offset.left
) { ) {
continue; continue;
} }
if ( if (
positionIE.left + draggableObj.iconWidth * 0.5 > positionIE.left + this.iconWidth * 0.5 >
target.offset.left + target.w target.offset.left + target.w
) { ) {
continue; continue;
...@@ -546,19 +575,19 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -546,19 +575,19 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// 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 ( if (
(onTarget !== null) && (this.onTarget !== null) &&
(onTarget.id !== target.id) (this.onTarget.id !== target.id)
) { ) {
removeObjIdFromTarget(); this.removeObjIdFromTarget();
onTarget = target; this.onTarget = target;
target.draggable.push(draggableObj.id); target.draggable.push(this.id);
} }
// If the draggable was moved from the slider to a // If the draggable was moved from the slider to a
// target, remember the target, and add ID to the // target, remember the target, and add ID to the
// target's draggables list. // target's draggables list.
else if (onTarget === null) { else if (this.onTarget === null) {
onTarget = target; this.onTarget = target;
target.draggable.push(draggableObj.id); target.draggable.push(this.id);
} }
if (target.numTextEl !== null) { if (target.numTextEl !== null) {
...@@ -567,43 +596,45 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -567,43 +596,45 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// Reposition the draggable so that it's center // Reposition the draggable so that it's center
// coincides with the center of the target. // coincides with the center of the target.
snapToTarget(target); this.snapToTarget(target);
break; break;
} }
return targetFound;
} }
function snapToTarget(target) { function snapToTarget(target) {
var offset; var offset;
offset = 0; offset = 0;
if (state.config.targetOutline === true) { if (this.state.config.targetOutline === true) {
offset = 1; offset = 1;
} }
draggableObj.iconEl.css( this.iconEl.css(
'left', 'left',
target.offset.left + 0.5 * target.w - target.offset.left + 0.5 * target.w -
draggableObj.iconWidth * 0.5 + offset this.iconWidth * 0.5 + offset
- draggableObj.iconElLeftOffset - this.iconElLeftOffset
); );
draggableObj.iconEl.css( this.iconEl.css(
'top', 'top',
target.offset.top + 0.5 * target.h - target.offset.top + 0.5 * target.h -
draggableObj.iconHeight * 0.5 + offset this.iconHeight * 0.5 + offset
); );
if (draggableObj.labelEl !== null) { if (this.labelEl !== null) {
draggableObj.labelEl.css( this.labelEl.css(
'left', 'left',
target.offset.left + 0.5 * target.w - target.offset.left + 0.5 * target.w -
draggableObj.labelWidth * 0.5 + offset this.labelWidth * 0.5 + offset
- 9 // Acoount for padding, border. - 9 // Acoount for padding, border.
); );
draggableObj.labelEl.css( this.labelEl.css(
'top', 'top',
target.offset.top + 0.5 * target.h + target.offset.top + 0.5 * target.h +
draggableObj.iconHeight * 0.5 + 5 + offset this.iconHeight * 0.5 + 5 + offset
); );
} }
} }
...@@ -621,22 +652,17 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -621,22 +652,17 @@ define(['logme', 'update_input'], function (logme, updateInput) {
function correctZIndexes() { function correctZIndexes() {
var draggablesInMe, c1, c2, highestZIndex; var draggablesInMe, c1, c2, highestZIndex;
if (state.individualTargets === true) { if (this.state.individualTargets === true) {
if (this.onTarget.draggable.length > 0) {
logme('In correctZIndexes.');
if (onTarget.draggable.length > 0) {
logme('onTarget.draggable.length > 0');
draggablesInMe = []; draggablesInMe = [];
for (c1 = 0; c1 < onTarget.draggable.length; c1 += 1) { for (c1 = 0; c1 < this.onTarget.draggable.length; c1 += 1) {
for (c2 = 0; c2 < state.draggables.length; c2 += 1) { for (c2 = 0; c2 < this.state.draggables.length; c2 += 1) {
if ( if (
onTarget.draggable[c1] === this.onTarget.draggable[c1] ===
state.draggables[c2].id this.state.draggables[c2].id
) { ) {
draggablesInMe.push(state.draggables[c2]); draggablesInMe.push(this.state.draggables[c2]);
} }
} }
} }
...@@ -653,20 +679,11 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -653,20 +679,11 @@ define(['logme', 'update_input'], function (logme, updateInput) {
} }
if (highestZIndex === -10000) { if (highestZIndex === -10000) {
highestZIndex = onTarget.draggable.length; highestZIndex = this.onTarget.draggable.length;
} else if (highestZIndex < draggableObj.oldZIndex) { } else if (highestZIndex < this.oldZIndex) {
highestZIndex = draggableObj.oldZIndex; highestZIndex = this.oldZIndex;
} else { } else {
for (c1 = 0; c1 < draggablesInMe.length; c1 += 1) { for (c1 = 0; c1 < draggablesInMe.length; c1 += 1) {
logme('draggablesInMe[' + c1 + '].id = ' + draggablesInMe[c1].id);
logme('draggablesInMe[' + c1 + '].zIndex = ' + draggablesInMe[c1].zIndex);
logme('draggablesInMe[' + c1 + '].oldZIndex = ' + draggablesInMe[c1].oldZIndex);
}
logme('----------------');
logme('highestZIndex = ' + highestZIndex);
for (c1 = 0; c1 < draggablesInMe.length; c1 += 1) {
draggablesInMe[c1].zIndex -= 1; draggablesInMe[c1].zIndex -= 1;
draggablesInMe[c1].oldZIndex -= 1; draggablesInMe[c1].oldZIndex -= 1;
...@@ -683,51 +700,50 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -683,51 +700,50 @@ define(['logme', 'update_input'], function (logme, updateInput) {
} }
} }
} else { } else {
logme('highestZIndex = onTarget.draggable.length'); highestZIndex = this.onTarget.draggable.length;
highestZIndex = onTarget.draggable.length;
} }
draggableObj.zIndex = highestZIndex; this.zIndex = highestZIndex;
draggableObj.oldZIndex = highestZIndex; this.oldZIndex = highestZIndex;
draggableObj.iconEl.css( this.iconEl.css(
'z-index', 'z-index',
draggableObj.zIndex this.zIndex
); );
if (draggableObj.labelEl !== null) { if (this.labelEl !== null) {
draggableObj.labelEl.css( this.labelEl.css(
'z-index', 'z-index',
draggableObj.zIndex this.zIndex
); );
} }
} else { } else {
for (c1 = 0; c1 < state.draggables.length; c1++) { for (c1 = 0; c1 < this.state.draggables.length; c1++) {
if ( if (
draggableObj.oldZIndex < this.oldZIndex <
state.draggables[c1].zIndex this.state.draggables[c1].zIndex
) { ) {
state.draggables[c1].zIndex -= 1; this.state.draggables[c1].zIndex -= 1;
state.draggables[c1].oldZIndex = state.draggables[c1].zIndex; this.state.draggables[c1].oldZIndex = this.state.draggables[c1].zIndex;
state.draggables[c1].iconEl.css( this.state.draggables[c1].iconEl.css(
'z-index', 'z-index',
state.draggables[c1].zIndex this.state.draggables[c1].zIndex
); );
if (state.draggables[c1].labelEl !== null) { if (this.state.draggables[c1].labelEl !== null) {
state.draggables[c1].labelEl.css( this.state.draggables[c1].labelEl.css(
'z-index', 'z-index',
state.draggables[c1].zIndex this.state.draggables[c1].zIndex
); );
} }
} }
} }
draggableObj.zIndex = c1; this.zIndex = c1;
draggableObj.oldZIndex = c1; this.oldZIndex = c1;
draggableObj.iconEl.css('z-index', c1); this.iconEl.css('z-index', c1);
if (draggableObj.labelEl !== null) { if (this.labelEl !== null) {
draggableObj.labelEl.css('z-index', c1); this.labelEl.css('z-index', c1);
} }
} }
} }
...@@ -736,63 +752,60 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -736,63 +752,60 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// move it back to the slider, placing it in the same position // move it back to the slider, placing it in the same position
// that it was dragged out of. // that it was dragged out of.
function moveBackToSlider() { function moveBackToSlider() {
draggableObj.containerEl.show(); this.containerEl.show();
draggableObj.zIndex = draggableObj.oldZIndex; this.zIndex = this.oldZIndex;
draggableObj.iconEl.detach(); this.iconEl.detach();
draggableObj.iconEl.css('border', 'none'); this.iconEl.css('border', 'none');
draggableObj.iconEl.css('background-color', 'transparent'); this.iconEl.css('background-color', 'transparent');
draggableObj.iconEl.css('padding-left', 0); this.iconEl.css('padding-left', 0);
draggableObj.iconEl.css('padding-right', 0); this.iconEl.css('padding-right', 0);
draggableObj.iconEl.css('z-index', draggableObj.zIndex); this.iconEl.css('z-index', this.zIndex);
draggableObj.iconEl.css( this.iconEl.css(
'width', 'width',
draggableObj.iconWidthSmall this.iconWidthSmall
); );
draggableObj.iconEl.css( this.iconEl.css(
'height', 'height',
draggableObj.iconHeightSmall this.iconHeightSmall
); );
draggableObj.iconEl.css( this.iconEl.css(
'left', 'left',
50 - draggableObj.iconWidthSmall * 0.5 50 - this.iconWidthSmall * 0.5
); );
if (draggableObj.labelEl !== null) { if (this.labelEl !== null) {
draggableObj.iconEl.css('top', 5); this.iconEl.css('top', 5);
} else { } else {
draggableObj.iconEl.css( this.iconEl.css(
'top', 'top',
50 - draggableObj.iconHeightSmall * 0.5 50 - this.iconHeightSmall * 0.5
); );
} }
draggableObj.iconEl.appendTo(draggableObj.containerEl); this.iconEl.appendTo(this.containerEl);
if (draggableObj.labelEl !== null) { if (this.labelEl !== null) {
draggableObj.labelEl.detach(); this.labelEl.detach();
draggableObj.labelEl.css('border', 'none'); this.labelEl.css('border', 'none');
draggableObj.labelEl.css('background-color', 'transparent'); this.labelEl.css('background-color', 'transparent');
draggableObj.labelEl.css('padding-left', 0); this.labelEl.css('padding-left', 0);
draggableObj.labelEl.css('padding-right', 0); this.labelEl.css('padding-right', 0);
draggableObj.labelEl.css('z-index', draggableObj.zIndex); this.labelEl.css('z-index', this.zIndex);
draggableObj.labelEl.css( this.labelEl.css(
'left', 'left',
50 - draggableObj.labelWidth * 0.5 50 - this.labelWidth * 0.5
); );
draggableObj.labelEl.css( this.labelEl.css(
'top', 'top',
5 + draggableObj.iconHeightSmall + 5 5 + this.iconHeightSmall + 5
); );
draggableObj.labelEl.appendTo( this.labelEl.appendTo(
draggableObj.containerEl this.containerEl
); );
} }
inContainer = true; this.inContainer = true;
}
}
}
} }
}); });
......
common/static/js/capa/drag_and_drop/main.js
...@@ -63,7 +63,9 @@ define( ...@@ -63,7 +63,9 @@ define(
Targets(state); Targets(state);
Scroller(state); Scroller(state);
Draggables(state); Draggables.init(state);
logme('After Draggables.init(state); state = ', state);
// 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.
......
common/static/js/capa/drag_and_drop/targets.js
...@@ -120,15 +120,6 @@ define(['logme'], function (logme) { ...@@ -120,15 +120,6 @@ define(['logme'], function (logme) {
lowestZIndex = 10000; lowestZIndex = 10000;
for (c1 = 0; c1 < draggablesInMe.length; c1 += 1) { for (c1 = 0; c1 < draggablesInMe.length; c1 += 1) {
logme(
'draggablesInMe[' + c1 + '].id = ' + draggablesInMe[c1].id,
'draggablesInMe[' + c1 + '].zIndex = ' + draggablesInMe[c1].zIndex,
'draggablesInMe[' + c1 + '].oldZIndex = ' + draggablesInMe[c1].oldZIndex
);
}
logme('------------------');
for (c1 = 0; c1 < draggablesInMe.length; c1 += 1) {
if (draggablesInMe[c1].zIndex < lowestZIndex) { if (draggablesInMe[c1].zIndex < lowestZIndex) {
lowestZIndex = draggablesInMe[c1].zIndex; lowestZIndex = draggablesInMe[c1].zIndex;
} }
......
common/static/js/capa/drag_and_drop/update_input.js
...@@ -10,6 +10,8 @@ define(['logme'], function (logme) { ...@@ -10,6 +10,8 @@ define(['logme'], function (logme) {
function updateInput(state, checkFirst) { function updateInput(state, checkFirst) {
var inputEl, stateStr, targets, draggables, c1, c2, tempObj; var inputEl, stateStr, targets, draggables, c1, c2, tempObj;
logme('updateInput; state = ', state);
if (checkFirst === true) { if (checkFirst === true) {
if (checkIfHasAnswer() === true) { if (checkIfHasAnswer() === true) {
return; return;
...@@ -126,7 +128,7 @@ define(['logme'], function (logme) { ...@@ -126,7 +128,7 @@ define(['logme'], function (logme) {
return; return;
} }
draggable.setInContainer(false); draggable.inContainer = false;
draggable.containerEl.hide(); draggable.containerEl.hide();
draggable.iconEl.detach(); draggable.iconEl.detach();
...@@ -196,7 +198,7 @@ define(['logme'], function (logme) { ...@@ -196,7 +198,7 @@ define(['logme'], function (logme) {
); );
} }
draggable.setOnTarget(target); draggable.onTarget = target;
target.draggable.push(draggableId); target.draggable.push(draggableId);
if (target.numTextEl !== null) { if (target.numTextEl !== null) {
...@@ -244,7 +246,7 @@ define(['logme'], function (logme) { ...@@ -244,7 +246,7 @@ define(['logme'], function (logme) {
return; return;
} }
draggable.setInContainer(false); draggable.inContainer = false;
draggable.containerEl.hide(); draggable.containerEl.hide();
draggable.iconEl.detach(); draggable.iconEl.detach();
......
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