Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
Valera Rozuvan
2013-01-17 16:36:15 +02:00
committed by Alexander Kryklia
parent f15887383e
commit 98977cabdb
8 changed files with 276 additions and 407 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
common/static/js/capa/drag_and_drop.js
View File

@@ -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

9
common/static/js/capa/drag_and_drop/base_image.js
View File

@@ -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!' +

46
common/static/js/capa/drag_and_drop/config_parser.js
View File

@@ -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, 'id') === false) ||
(attrIsString(obj, 'icon') === false) ||
(attrIsString(obj, 'label') === false) ||
if (!attrIsString(obj, 'icon')) {
return false;
}
if (!attrIsString(obj, 'label')) {
return 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;
}

331
common/static/js/capa/drag_and_drop/draggables.js
View File

@@ -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;
var c1, highestZIndex;
highestZIndex = -10000;
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]);
}
}
}
highestZIndex = -10000;
for (c1 = 0; c1 < draggablesInMe.length; c1 += 1) {
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);
}
}

16
common/static/js/capa/drag_and_drop/main.js
View File

@@ -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);
}
});

17
common/static/js/capa/drag_and_drop/state.js
View File

@@ -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
};
}
});

256
common/static/js/capa/drag_and_drop/targets.js
View File

@@ -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 = [];
c1 += 1;
}
}(0));
} // function Targets(state) {
for (c1 = 0; c1 < state.config.targets.length; c1++) {
processTarget(state.config.targets[c1]);
function processTarget(state, obj) {
var targetEl, borderCss, numTextEl, targetObj;
borderCss = '';
if (state.config.targetOutline === true) {
borderCss = 'border: 1px dashed gray; ';
}
return;
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();
});
function processTarget(obj) {
var targetEl, borderCss, numTextEl, targetObj;
borderCss = '';
if (state.config.targetOutline === true) {
borderCss = 'border: 1px dashed gray; ';
}
targetEl = $(
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) {
} else {
numTextEl = null;
}
targetObj = {
'id': obj.id,
'w': obj.w,
'h': obj.h,
'el': targetEl,
'offset': targetEl.position(),
'draggableList': [],
'targetEl': targetEl,
'numTextEl': numTextEl,
'updateNumTextEl': updateNumTextEl,
'removeDraggable': removeDraggable,
'addDraggable': addDraggable
};
if (state.config.onePerTarget === false) {
numTextEl.appendTo(state.baseImageEl.parent());
numTextEl.mousedown(function (event) {
event.preventDefault();
});
numTextEl.mouseup(function () {
cycleDraggableOrder.call(targetObj)
});
}
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>'
);
state.targets.push(targetObj);
}
function removeDraggable(draggable) {
this.draggableList.splice(draggable.onTargetIndex, 1);
draggable.onTarget = null;
draggable.onTargetIndex = null;
this.updateNumTextEl();
}
function addDraggable(draggable) {
draggable.onTarget = this;
draggable.onTargetIndex = this.draggableList.push(draggable) - 1;
this.updateNumTextEl();
}
/*
* 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;
}
if (this.draggableList[c1].zIndex > highestZIndex) {
highestZIndex = this.draggableList[c1].zIndex;
}
}
for (c1 = 0; c1 < this.draggableList.length; c1 += 1) {
if (this.draggableList[c1].zIndex === lowestZIndex) {
this.draggableList[c1].zIndex = highestZIndex;
} else {
numTextEl = null;
this.draggableList[c1].zIndex -= 1;
}
targetObj = {
'id': obj.id,
'w': obj.w,
'h': obj.h,
'el': targetEl,
'offset': targetEl.position(),
'draggable': [],
'targetEl': targetEl,
'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)
});
}
state.targets.push(targetObj);
}
function cycleDraggableOrder() {
var draggablesInMe, c1, c2, lowestZIndex, highestZIndex;
if (this.draggable.length === 0) {
return 0;
}
draggablesInMe = [];
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]);
}
}
}
highestZIndex = -10000;
lowestZIndex = 10000;
for (c1 = 0; c1 < draggablesInMe.length; c1 += 1) {
if (draggablesInMe[c1].zIndex < lowestZIndex) {
lowestZIndex = draggablesInMe[c1].zIndex;
}
if (draggablesInMe[c1].zIndex > highestZIndex) {
highestZIndex = draggablesInMe[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);
}
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 Targets(state) {
}
function updateNumTextEl() {
this.numTextEl.html(this.draggable.length);
if (this.numTextEl !== null) {
this.numTextEl.html(this.draggableList.length);
}
}
});

6
common/static/js/capa/drag_and_drop/update_input.js
View File

@@ -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;