Skip to content

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

Refactoring of Drag and Drop complete. Draggable properties isUsable, isOriginal… 

Refactoring of Drag and Drop complete. Draggable properties isUsable, isOriginal included, but functionality connected with them is not complete. Found and fixed bug with z-index ordering.
parent f1588738
Showing with 265 additions and 396 deletions
common/static/js/capa/drag_and_drop.js
......@@ -5,7 +5,7 @@
(function (requirejs, require, define) {
requirejs.config({
'baseUrl': '/static/js/capa/drag_and_drop/',
'baseUrl': '/static/js/capa/drag_and_drop/'
});
// The current JS file will be loaded and run each time. It will require a
......
common/static/js/capa/drag_and_drop/base_image.js
......@@ -24,10 +24,7 @@ define(['logme'], function (logme) {
state.baseImageEl = $('<img />');
state.baseImageEl.attr(
'src',
state.config.baseImage
);
state.baseImageEl.attr('src', state.config.baseImage);
state.baseImageEl.load(function () {
baseImageElContainer.css('width', this.width);
baseImageElContainer.css('height', this.height);
......@@ -42,9 +39,7 @@ define(['logme'], function (logme) {
state.baseImageLoaded = true;
});
state.baseImageEl.error(function () {
logme(
'ERROR: Image "' + state.config.baseImage + '" was not found!'
);
logme('ERROR: Image "' + state.config.baseImage + '" was not found!');
baseImageElContainer.html(
'<span style="color: red;">' +
'ERROR: Image "' + state.config.baseImage + '" was not found!' +
......
common/static/js/capa/drag_and_drop/config_parser.js
......@@ -7,17 +7,15 @@
define(['logme'], function (logme) {
return configParser;
function configParser(config, state) {
function configParser(state, config) {
state.config = {
'draggables': [],
'baseImage': '',
'targets': [],
'onePerTarget': null,
'onePerTarget': null, // Specified by user. No default.
'targetOutline': true,
'labelBgColor': '#d6d6d6',
'individualTargets': null,
'individualTargets': null, // Depends on 'targets'.
'errors': 0 // Number of errors found while parsing config.
};
......@@ -156,19 +154,13 @@ define(['logme'], function (logme) {
}
function processDraggable(state, obj) {
if (!attrIsString(obj, 'id')) {
return false;
}
if (!attrIsString(obj, 'icon')) {
return false;
}
if (!attrIsString(obj, 'label')) {
return false;
}
if (
(attrIsString(obj, 'id') === false) ||
(attrIsString(obj, 'icon') === false) ||
(attrIsString(obj, 'label') === false) ||
if (!attrIsBoolean(obj, 'can_reuse', false)) {
(attrIsBoolean(obj, 'can_reuse', false) === false)
) {
return false;
}
......@@ -178,21 +170,15 @@ define(['logme'], function (logme) {
}
function processTarget(state, obj) {
if (!attrIsString(obj, 'id')) {
return false;
}
if (
(attrIsString(obj, 'id') === false) ||
if (!attrIsInteger(obj, 'w')) {
return false;
}
if (!attrIsInteger(obj, 'h')) {
return false;
}
(attrIsInteger(obj, 'w') === false) ||
(attrIsInteger(obj, 'h') === false) ||
if (!attrIsInteger(obj, 'x')) {
return false;
}
if (!attrIsInteger(obj, 'y')) {
(attrIsInteger(obj, 'x') === false) ||
(attrIsInteger(obj, 'y') === false)
) {
return false;
}
......
common/static/js/capa/drag_and_drop/draggables.js
......@@ -10,13 +10,9 @@ define(['logme', 'update_input'], function (logme, updateInput) {
};
function init(state) {
state.draggables = [];
state.numDraggablesInSlider = 0;
state.currentMovingDraggable = null;
(function (c1) {
while (c1 < state.config.draggables.length) {
processDraggable(state, state.config.draggables[c1], c1 + 1);
processDraggable(state, state.config.draggables[c1]);
c1 += 1
}
}(0));
......@@ -121,6 +117,9 @@ define(['logme', 'update_input'], function (logme, updateInput) {
this.x = newPosition.x;
this.y = newPosition.y;
this.zIndex = 1000;
this.correctZIndexes();
this.state.numDraggablesInSlider -= 1;
this.state.updateArrowOpacity();
}
......@@ -180,35 +179,49 @@ define(['logme', 'update_input'], function (logme, updateInput) {
this.labelEl.appendTo(this.state.baseImageEl.parent());
}
this.onTarget = target;
target.draggable.push(this.id);
target.addDraggable(this);
if (target.numTextEl !== null) {
target.updateNumTextEl();
}
this.zIndex = 1000;
this.correctZIndexes();
this.state.numDraggablesInSlider -= 1;
this.state.updateArrowOpacity();
}
function processDraggable(state, obj, objIndex) {
function processDraggable(state, obj) {
var draggableObj;
draggableObj = {
'id': obj.id,
'isReusable': obj.can_reuse,
'isOriginal': true,
'x': -1,
'y': -1,
'zIndex': objIndex,
'oldZIndex': objIndex,
'zIndex': 1,
'containerEl': null,
'iconEl': null,
'iconElBGColor': null,
'iconElPadding': null,
'iconElBorder': null,
'iconElLeftOffset': null,
'iconWidth': null,
'iconHeight': null,
'iconWidthSmall': null,
'iconHeightSmall': null,
'labelEl': null,
'labelWidth': null,
'hasLoaded': false,
'inContainer': true,
'mousePressed': false,
'onTarget': null,
'onTargetIndex': null,
'state': state,
......@@ -216,7 +229,6 @@ define(['logme', 'update_input'], function (logme, updateInput) {
'mouseUp': mouseUp,
'mouseMove': mouseMove,
'checkLandingElement': checkLandingElement,
'removeObjIdFromTarget': removeObjIdFromTarget,
'checkIfOnTarget': checkIfOnTarget,
'snapToTarget': snapToTarget,
'correctZIndexes': correctZIndexes,
......@@ -234,7 +246,6 @@ define(['logme', 'update_input'], function (logme, updateInput) {
'display: inline; ' +
'float: left; ' +
'overflow: hidden; ' +
'z-index: ' + objIndex + '; ' +
'border-left: 1px solid #CCC; ' +
'border-right: 1px solid #CCC; ' +
'text-align: center; ' +
......@@ -252,49 +263,28 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.iconElLeftOffset = 0;
draggableObj.iconEl = $('<img />');
draggableObj.iconEl.attr(
'src',
obj.icon
);
draggableObj.iconEl.attr('src', obj.icon);
draggableObj.iconEl.load(function () {
draggableObj.iconWidth = this.width;
draggableObj.iconHeight = this.height;
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(
'left',
50 - draggableObj.iconWidthSmall * 0.5
);
draggableObj.iconEl.css('width', draggableObj.iconWidthSmall);
draggableObj.iconEl.css('height', draggableObj.iconHeightSmall);
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);
......@@ -306,27 +296,16 @@ define(['logme', 'update_input'], function (logme, updateInput) {
'position: absolute; ' +
'color: black; ' +
'font-size: 0.95em; ' +
'z-index: ' + objIndex + '; ' +
'" ' +
'>' +
obj.label +
'</div>'
);
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(function (event) {
draggableObj.mouseDown.call(draggableObj, event);
......@@ -358,7 +337,6 @@ define(['logme', 'update_input'], function (logme, updateInput) {
'position: absolute; ' +
'color: black; ' +
'font-size: 0.95em; ' +
'z-index: ' + objIndex + '; ' +
'" ' +
'>' +
obj.label +
......@@ -372,14 +350,8 @@ 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);
draggableObj.hasLoaded = true;
} else {
......@@ -421,6 +393,11 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// potentially cause the highlghting of the dragged element.
event.preventDefault();
if ((this.isReusable === true) && (this.isOriginal === true)) {
return;
}
// If this draggable is just being dragged out of the
// container, we must perform some additional tasks.
if (this.inContainer === true) {
......@@ -500,7 +477,6 @@ define(['logme', 'update_input'], function (logme, updateInput) {
this.state.numDraggablesInSlider -= 1;
}
this.oldZIndex = this.zIndex;
this.zIndex = 1000;
this.iconEl.css('z-index', '1000');
if (this.labelEl !== null) {
......@@ -532,32 +508,21 @@ define(['logme', 'update_input'], function (logme, updateInput) {
this.iconEl.css(
'left',
event.pageX -
this.state.baseImageEl.offset().left -
this.iconWidth * 0.5
- this.iconElLeftOffset
event.pageX - this.state.baseImageEl.offset().left - this.iconWidth * 0.5 - this.iconElLeftOffset
);
this.iconEl.css(
'top',
event.pageY -
this.state.baseImageEl.offset().top -
this.iconHeight * 0.5
event.pageY - this.state.baseImageEl.offset().top - this.iconHeight * 0.5
);
if (this.labelEl !== null) {
this.labelEl.css(
'left',
event.pageX -
this.state.baseImageEl.offset().left -
this.labelWidth * 0.5
- 9 // Acoount for padding, border.
event.pageX - this.state.baseImageEl.offset().left - this.labelWidth * 0.5 - 9 // Acoount for padding, border.
);
this.labelEl.css(
'top',
event.pageY -
this.state.baseImageEl.offset().top +
this.iconHeight * 0.5 +
5
event.pageY - this.state.baseImageEl.offset().top + this.iconHeight * 0.5 + 5
);
}
}
......@@ -578,23 +543,20 @@ define(['logme', 'update_input'], function (logme, updateInput) {
if (this.checkIfOnTarget(positionIE) === true) {
this.correctZIndexes();
} else {
if (this.onTarget !== null) {
this.onTarget.removeDraggable(this);
}
this.moveBackToSlider();
this.removeObjIdFromTarget();
this.state.numDraggablesInSlider += 1;
}
} else {
if (
(positionIE.left < 0) ||
(
positionIE.left + this.iconWidth >
this.state.baseImageEl.width()
) ||
(positionIE.left + this.iconWidth > this.state.baseImageEl.width()) ||
(positionIE.top < 0) ||
(
positionIE.top + this.iconHeight >
this.state.baseImageEl.height()
)
(positionIE.top + this.iconHeight > this.state.baseImageEl.height())
) {
this.moveBackToSlider();
......@@ -605,10 +567,8 @@ define(['logme', 'update_input'], function (logme, updateInput) {
} else {
this.correctZIndexes();
this.x =
positionIE.left + this.iconWidth * 0.5;
this.y =
positionIE.top + this.iconHeight * 0.5;
this.x = positionIE.left + this.iconWidth * 0.5;
this.y = positionIE.top + this.iconHeight * 0.5;
}
}
......@@ -616,26 +576,6 @@ define(['logme', 'update_input'], function (logme, updateInput) {
updateInput.update(this.state);
}
function removeObjIdFromTarget() {
var c1;
if (this.onTarget !== null) {
for (c1 = 0; c1 < this.onTarget.draggable.length; c1 += 1) {
if (this.onTarget.draggable[c1] === this.id) {
this.onTarget.draggable.splice(c1, 1);
break;
}
}
if (this.onTarget.numTextEl !== null) {
this.onTarget.updateNumTextEl();
}
this.onTarget = null;
}
}
//
// Determine if a draggable, after it was relased, ends up on a
// target. We do this by iterating over all of the targets, and
......@@ -647,9 +587,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// this.iconEl.position()
//
function checkIfOnTarget(positionIE) {
var c1, target, targetFound;
targetFound = false;
var c1, target;
for (c1 = 0; c1 < this.state.targets.length; c1 += 1) {
target = this.state.targets[c1];
......@@ -660,75 +598,52 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// against), then go to next target.
if (
(this.state.config.onePerTarget === true) &&
(target.draggable.length === 1) &&
(target.draggable[0] !== this.id)
(target.draggableList.length === 1) &&
(target.draggableList[0].id !== this.id)
) {
continue;
}
// Check if the draggable's center coordinate is within
// the target's dimensions. If not, go to next target.
if (
positionIE.top + this.iconHeight * 0.5 <
target.offset.top
) {
if (positionIE.top + this.iconHeight * 0.5 < target.offset.top) {
continue;
}
if (
positionIE.top + this.iconHeight * 0.5 >
target.offset.top + target.h
) {
if (positionIE.top + this.iconHeight * 0.5 > target.offset.top + target.h) {
continue;
}
if (
positionIE.left + this.iconWidth * 0.5 <
target.offset.left
) {
if (positionIE.left + this.iconWidth * 0.5 < target.offset.left) {
continue;
}
if (
positionIE.left + this.iconWidth * 0.5 >
target.offset.left + target.w
) {
if (positionIE.left + this.iconWidth * 0.5 > target.offset.left + target.w) {
continue;
}
// If we got here, then our draggable is on top of a
// target.
targetFound = true;
// If the draggable was moved from one target to
// another, then we need to remove it's ID from the
// another, then we need to remove it from the
// previous target's draggables list, and add it to the
// new target's draggables list.
if (
(this.onTarget !== null) &&
(this.onTarget.id !== target.id)
) {
this.removeObjIdFromTarget();
this.onTarget = target;
target.draggable.push(this.id);
if ((this.onTarget !== null) && (this.onTarget.id !== target.id)) {
this.onTarget.removeDraggable(this);
target.addDraggable(this);
}
// If the draggable was moved from the slider to a
// target, remember the target, and add ID to the
// target's draggables list.
else if (this.onTarget === null) {
this.onTarget = target;
target.draggable.push(this.id);
}
if (target.numTextEl !== null) {
target.updateNumTextEl();
target.addDraggable(this);
}
// Reposition the draggable so that it's center
// coincides with the center of the target.
this.snapToTarget(target);
break;
// Target was found.
return true;
}
return targetFound;
// Target was not found.
return false;
}
function snapToTarget(target) {
......@@ -771,101 +686,45 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// ordering of the visibility (z-index) of the other draggables
// will not change.
function correctZIndexes() {
var draggablesInMe, c1, c2, highestZIndex;
if (this.state.config.individualTargets === true) {
if (this.onTarget.draggable.length > 0) {
draggablesInMe = [];
for (c1 = 0; c1 < this.onTarget.draggable.length; c1 += 1) {
for (c2 = 0; c2 < this.state.draggables.length; c2 += 1) {
if (
this.onTarget.draggable[c1] ===
this.state.draggables[c2].id
) {
draggablesInMe.push(this.state.draggables[c2]);
}
}
}
var c1, highestZIndex;
highestZIndex = -10000;
highestZIndex = -10000;
for (c1 = 0; c1 < draggablesInMe.length; c1 += 1) {
if (this.state.config.individualTargets === true) {
if (this.onTarget.draggableList.length > 0) {
for (c1 = 0; c1 < this.onTarget.draggableList.length; c1 += 1) {
if (
(draggablesInMe[c1].zIndex > highestZIndex) &&
(draggablesInMe[c1].zIndex !== 1000)
(this.onTarget.draggableList[c1].zIndex > highestZIndex) &&
(this.onTarget.draggableList[c1].zIndex !== 1000)
) {
highestZIndex = draggablesInMe[c1].zIndex;
}
}
if (highestZIndex === -10000) {
highestZIndex = this.onTarget.draggable.length;
} else if (highestZIndex < this.oldZIndex) {
highestZIndex = this.oldZIndex;
} else {
for (c1 = 0; c1 < draggablesInMe.length; c1 += 1) {
draggablesInMe[c1].zIndex -= 1;
draggablesInMe[c1].oldZIndex -= 1;
draggablesInMe[c1].iconEl.css(
'z-index',
draggablesInMe[c1].zIndex
);
if (draggablesInMe[c1].labelEl !== null) {
draggablesInMe[c1].labelEl.css(
'z-index',
draggablesInMe[c1].zIndex
);
}
highestZIndex = this.onTarget.draggableList[c1].zIndex;
}
}
} else {
highestZIndex = this.onTarget.draggable.length;
}
this.zIndex = highestZIndex;
this.oldZIndex = highestZIndex;
this.iconEl.css(
'z-index',
this.zIndex
);
if (this.labelEl !== null) {
this.labelEl.css(
'z-index',
this.zIndex
);
highestZIndex = 0;
}
} else {
for (c1 = 0; c1 < this.state.draggables.length; c1++) {
if (
this.oldZIndex <
this.state.draggables[c1].zIndex
) {
this.state.draggables[c1].zIndex -= 1;
this.state.draggables[c1].oldZIndex = this.state.draggables[c1].zIndex;
this.state.draggables[c1].iconEl.css(
'z-index',
this.state.draggables[c1].zIndex
);
if (this.state.draggables[c1].labelEl !== null) {
this.state.draggables[c1].labelEl.css(
'z-index',
this.state.draggables[c1].zIndex
);
if (this.inContainer === false) {
if (
(this.state.draggables[c1].zIndex > highestZIndex) &&
(this.state.draggables[c1].zIndex !== 1000)
) {
highestZIndex = this.state.draggables[c1].zIndex;
}
}
}
}
this.zIndex = c1;
this.oldZIndex = c1;
this.iconEl.css('z-index', c1);
if (highestZIndex === -10000) {
highestZIndex = 0;
}
if (this.labelEl !== null) {
this.labelEl.css('z-index', c1);
}
this.zIndex = highestZIndex + 1;
this.iconEl.css('z-index', highestZIndex);
if (this.labelEl !== null) {
this.labelEl.css('z-index', highestZIndex);
}
}
......
common/static/js/capa/drag_and_drop/main.js
......@@ -5,10 +5,8 @@
(function (requirejs, require, define) {
define(
['logme', 'state', 'config_parser', 'container', 'base_image', 'scroller',
'draggables', 'targets', 'update_input'],
function (logme, State, configParser, Container, BaseImage, Scroller,
Draggables, Targets, updateInput) {
['logme', 'state', 'config_parser', 'container', 'base_image', 'scroller', 'draggables', 'targets', 'update_input'],
function (logme, State, configParser, Container, BaseImage, Scroller, Draggables, Targets, updateInput) {
return Main;
function Main() {
......@@ -45,7 +43,7 @@ define(
state = State(problemId);
if (configParser(config, state) !== true) {
if (configParser(state, config) !== true) {
logme('ERROR: Could not make sense of the JSON configuration options.');
return;
......@@ -70,11 +68,11 @@ define(
if (updateInput.check(state) === false) {
updateInput.update(state);
}
setTimeout(function () {
logme('state.draggables', state.draggables);
}, 500);
}());
setTimeout(function () {
logme('After 1000 ms:', state);
}, 1000);
}
});
......
common/static/js/capa/drag_and_drop/state.js
......@@ -9,11 +9,24 @@ define([], function () {
function State(problemId) {
return {
'problemId': problemId,
'config': null,
'baseImageEl': null,
'baseImageLoaded': false,
'numDraggablesInSlider': 0
'containerEl': null,
'sliderEl': null,
'problemId': problemId,
'draggables': [],
'numDraggablesInSlider': 0,
'currentMovingDraggable': null,
'targets': [],
'updateArrowOpacity': null
};
}
});
......
common/static/js/capa/drag_and_drop/targets.js
......@@ -8,146 +8,166 @@ define(['logme'], function (logme) {
return Targets;
function Targets(state) {
var c1;
(function (c1) {
while (c1 < state.config.targets.length) {
processTarget(state, state.config.targets[c1]);
state.targets = [];
for (c1 = 0; c1 < state.config.targets.length; c1++) {
processTarget(state.config.targets[c1]);
}
return;
c1 += 1;
}
}(0));
} // function Targets(state) {
function processTarget(obj) {
var targetEl, borderCss, numTextEl, targetObj;
function processTarget(state, obj) {
var targetEl, borderCss, numTextEl, targetObj;
borderCss = '';
if (state.config.targetOutline === true) {
borderCss = 'border: 1px dashed gray; ';
}
borderCss = '';
if (state.config.targetOutline === true) {
borderCss = 'border: 1px dashed gray; ';
}
targetEl = $(
targetEl = $(
'<div ' +
'style=" ' +
'display: block; ' +
'position: absolute; ' +
'width: ' + obj.w + 'px; ' +
'height: ' + obj.h + 'px; ' +
'top: ' + obj.y + 'px; ' +
'left: ' + obj.x + 'px; ' +
borderCss +
'" ' +
'data-target-id="' + obj.id + '" ' +
'></div>'
);
targetEl.appendTo(state.baseImageEl.parent());
targetEl.mousedown(function (event) {
event.preventDefault();
});
if (state.config.onePerTarget === false) {
numTextEl = $(
'<div ' +
'style=" ' +
'display: block; ' +
'position: absolute; ' +
'width: ' + obj.w + 'px; ' +
'height: ' + obj.h + 'px; ' +
'width: 24px; ' +
'height: 24px; ' +
'top: ' + obj.y + 'px; ' +
'left: ' + obj.x + 'px; ' +
borderCss +
'left: ' + (obj.x + obj.w - 24) + 'px; ' +
'border: 1px solid black; ' +
'text-align: center; ' +
'z-index: 500; ' +
'background-color: white; ' +
'font-size: 0.95em; ' +
'color: #009fe2; ' +
'cursor: pointer; ' +
'" ' +
'data-target-id="' + obj.id + '" ' +
'></div>'
'>0</div>'
);
targetEl.appendTo(state.baseImageEl.parent());
targetEl.mousedown(function (event) {
event.preventDefault();
});
if (state.config.onePerTarget === false) {
numTextEl = $(
'<div ' +
'style=" ' +
'display: block; ' +
'position: absolute; ' +
'width: 24px; ' +
'height: 24px; ' +
'top: ' + obj.y + 'px; ' +
'left: ' + (obj.x + obj.w - 24) + 'px; ' +
'border: 1px solid black; ' +
'text-align: center; ' +
'z-index: 500; ' +
'background-color: white; ' +
'font-size: 0.95em; ' +
'color: #009fe2; ' +
'cursor: pointer; ' +
'" ' +
'>0</div>'
);
} else {
numTextEl = null;
}
} else {
numTextEl = null;
}
targetObj = {
'id': obj.id,
targetObj = {
'id': obj.id,
'w': obj.w,
'h': obj.h,
'w': obj.w,
'h': obj.h,
'el': targetEl,
'offset': targetEl.position(),
'el': targetEl,
'offset': targetEl.position(),
'draggable': [],
'draggableList': [],
'targetEl': targetEl,
'targetEl': targetEl,
'numTextEl': numTextEl,
'updateNumTextEl': updateNumTextEl
};
'numTextEl': numTextEl,
'updateNumTextEl': updateNumTextEl,
if (state.config.onePerTarget === false) {
numTextEl.appendTo(state.baseImageEl.parent());
numTextEl.mousedown(function (event) {
event.preventDefault();
});
numTextEl.mouseup(function () {
cycleDraggableOrder.call(targetObj)
});
}
'removeDraggable': removeDraggable,
'addDraggable': addDraggable
};
state.targets.push(targetObj);
if (state.config.onePerTarget === false) {
numTextEl.appendTo(state.baseImageEl.parent());
numTextEl.mousedown(function (event) {
event.preventDefault();
});
numTextEl.mouseup(function () {
cycleDraggableOrder.call(targetObj)
});
}
function cycleDraggableOrder() {
var draggablesInMe, c1, c2, lowestZIndex, highestZIndex;
state.targets.push(targetObj);
}
if (this.draggable.length === 0) {
return 0;
}
function removeDraggable(draggable) {
this.draggableList.splice(draggable.onTargetIndex, 1);
draggablesInMe = [];
draggable.onTarget = null;
draggable.onTargetIndex = null;
for (c1 = 0; c1 < this.draggable.length; c1 += 1) {
for (c2 = 0; c2 < state.draggables.length; c2 += 1) {
if (this.draggable[c1] === state.draggables[c2].id) {
draggablesInMe.push(state.draggables[c2]);
}
}
}
this.updateNumTextEl();
}
highestZIndex = -10000;
lowestZIndex = 10000;
function addDraggable(draggable) {
draggable.onTarget = this;
draggable.onTargetIndex = this.draggableList.push(draggable) - 1;
for (c1 = 0; c1 < draggablesInMe.length; c1 += 1) {
if (draggablesInMe[c1].zIndex < lowestZIndex) {
lowestZIndex = draggablesInMe[c1].zIndex;
}
this.updateNumTextEl();
}
if (draggablesInMe[c1].zIndex > highestZIndex) {
highestZIndex = draggablesInMe[c1].zIndex;
}
/*
* function cycleDraggableOrder
*
* Parameters:
* none - This function does not expect any parameters.
*
* Returns:
* undefined - The return value of this function is not used.
*
* Description:
* Go through all draggables that are on the current target, and decrease their
* z-index by 1, making sure that the bottom-most draggable ends up on the top.
*/
function cycleDraggableOrder() {
var c1, lowestZIndex, highestZIndex;
if (this.draggableList.length === 0) {
return;
}
highestZIndex = -10000;
lowestZIndex = 10000;
for (c1 = 0; c1 < this.draggableList.length; c1 += 1) {
if (this.draggableList[c1].zIndex < lowestZIndex) {
lowestZIndex = this.draggableList[c1].zIndex;
}
for (c1 = 0; c1 < draggablesInMe.length; c1 += 1) {
if (draggablesInMe[c1].zIndex === lowestZIndex) {
draggablesInMe[c1].zIndex = highestZIndex;
draggablesInMe[c1].oldZIndex = highestZIndex;
} else {
draggablesInMe[c1].zIndex -= 1;
draggablesInMe[c1].oldZIndex -= 1;
}
draggablesInMe[c1].iconEl.css('z-index', draggablesInMe[c1].zIndex);
if (draggablesInMe[c1].labelEl !== null) {
draggablesInMe[c1].labelEl.css('z-index', draggablesInMe[c1].zIndex);
}
if (this.draggableList[c1].zIndex > highestZIndex) {
highestZIndex = this.draggableList[c1].zIndex;
}
}
} // function Targets(state) {
for (c1 = 0; c1 < this.draggableList.length; c1 += 1) {
if (this.draggableList[c1].zIndex === lowestZIndex) {
this.draggableList[c1].zIndex = highestZIndex;
} else {
this.draggableList[c1].zIndex -= 1;
}
this.draggableList[c1].iconEl.css('z-index', this.draggableList[c1].zIndex);
if (this.draggableList[c1].labelEl !== null) {
this.draggableList[c1].labelEl.css('z-index', this.draggableList[c1].zIndex);
}
}
}
function updateNumTextEl() {
this.numTextEl.html(this.draggable.length);
if (this.numTextEl !== null) {
this.numTextEl.html(this.draggableList.length);
}
}
});
......
common/static/js/capa/drag_and_drop/update_input.js
......@@ -13,8 +13,6 @@ define(['logme'], function (logme) {
function update(state) {
var draggables, tempObj;
logme('state.problemId = ' + state.problemId);
draggables = [];
if (state.config.individualTargets === false) {
......@@ -37,9 +35,9 @@ define(['logme'], function (logme) {
(function (c1) {
while (c1 < state.targets.length) {
(function (c2) {
while (c2 < state.targets[c1].draggable.length) {
while (c2 < state.targets[c1].draggableList.length) {
tempObj = {};
tempObj[state.targets[c1].draggable[c2]] = state.targets[c1].id;
tempObj[state.targets[c1].draggableList[c2].id] = state.targets[c1].id;
draggables.push(tempObj);
tempObj = null;
......
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