Skip to content

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

Added support for individual targets. Work in progress. Part 7.

parent e8424151
Showing with 176 additions and 60 deletions
common/static/js/capa/drag_and_drop/draggables.js
...@@ -22,7 +22,8 @@ define(['logme'], function (logme) { ...@@ -22,7 +22,8 @@ define(['logme'], function (logme) {
return; return;
function processDraggable(obj, index) { function processDraggable(obj, index) {
var draggableContainerEl, imgEl, inContainer, ousePressed; var draggableContainerEl, imgEl, inContainer, ousePressed,
onTarget;
draggableContainerEl = $( draggableContainerEl = $(
'<div ' + '<div ' +
...@@ -60,6 +61,8 @@ define(['logme'], function (logme) { ...@@ -60,6 +61,8 @@ define(['logme'], function (logme) {
inContainer = true; inContainer = true;
mousePressed = false; mousePressed = false;
onTarget = null;
draggableContainerEl.mousedown(mouseDown); draggableContainerEl.mousedown(mouseDown);
draggableContainerEl.mouseup(mouseUp); draggableContainerEl.mouseup(mouseUp);
draggableContainerEl.mousemove(mouseMove); draggableContainerEl.mousemove(mouseMove);
...@@ -87,40 +90,149 @@ define(['logme'], function (logme) { ...@@ -87,40 +90,149 @@ define(['logme'], function (logme) {
} }
} }
function mouseUp(event) { function mouseUp() {
if (mousePressed === true) { if (mousePressed === true) {
checkLandingElement(event); checkLandingElement();
} }
} }
function mouseMove(event) { function mouseMove() {
if (mousePressed === true) { if (mousePressed === true) {
draggableContainerEl.css('left', (event.pageX - 50)); draggableContainerEl.css('left', (event.pageX - 50));
draggableContainerEl.css('top', (event.pageY - 50)); draggableContainerEl.css('top', (event.pageY - 50));
event.preventDefault();
} }
} }
function mouseLeave(event) { function mouseLeave() {
if (mousePressed === true) { if (mousePressed === true) {
checkLandingElement(event); checkLandingElement();
} }
} }
function checkLandingElement(event) { function checkLandingElement() {
var offsetDE, offsetTE, indexes, DEindex; var offsetDE, offsetTE, indexes, DEindex, targetFound;
mousePressed = false; mousePressed = false;
offsetDE = draggableContainerEl.offset(); offsetDE = draggableContainerEl.offset();
offsetTE = state.targetEl.offset();
if (state.individualTargets === false) {
if ( offsetTE = state.targetEl.offset();
(offsetDE.left < offsetTE.left) ||
(offsetDE.left + 100 > offsetTE.left + state.targetEl.width()) || if (
(offsetDE.top < offsetTE.top) || (offsetDE.left < offsetTE.left) ||
(offsetDE.top + 100 > offsetTE.top + state.targetEl.height()) (offsetDE.left + 100 > offsetTE.left + state.targetEl.width()) ||
) { (offsetDE.top < offsetTE.top) ||
(offsetDE.top + 100 > offsetTE.top + state.targetEl.height())
) {
moveBackToSlider();
} else {
correctZIndexes();
}
} else if (state.individualTargets === true) {
targetFound = false;
checkIfOnTarget();
if (targetFound === true) {
correctZIndexes();
} else {
moveBackToSlider();
removeObjIdFromTarget();
}
}
return;
function removeObjIdFromTarget() {
var c1;
if (onTarget !== null) {
c1 = 0;
while (c1 < onTarget.draggable.length) {
if (onTarget.draggable[c1] === obj.id) {
onTarget.draggable.splice(c1, 1);
break;
}
c1 += 1;
}
onTarget = null;
}
}
function checkIfOnTarget() {
var c1, c2, target;
c1 = 0;
while (c1 < state.targets.length) {
target = state.targets[c1];
if (offsetDE.top + 50 < target.offset.top) {
c1 += 1;
continue;
}
if (offsetDE.top + 50 > target.offset.top + target.h) {
c1 += 1;
continue;
}
if (offsetDE.left + 50 < target.offset.left) {
c1 += 1;
continue;
}
if (offsetDE.left + 50 > target.offset.left + target.w) {
c1 += 1;
continue;
}
if (state.config.one_per_target === true) {
if (
(target.draggable.length === 1) &&
(target.draggable[0] !== obj.id)
) {
c1 += 1;
continue;
}
}
targetFound = true;
removeObjIdFromTarget();
onTarget = target;
target.draggable.push(obj.id);
snapToTarget(target);
break;
}
}
function snapToTarget(target) {
draggableContainerEl.css('left', (target.offset.left + 0.5 * target.w - 50));
draggableContainerEl.css('top', (target.offset.top + 0.5 * target.h - 50));
}
function correctZIndexes() {
var c1;
c1 = 0;
while (c1 < _draggables.length) {
if (parseInt(draggableContainerEl.attr('data-old-z-index'), 10) < parseInt(_draggables[c1].css('z-index'), 10)) {
_draggables[c1].css('z-index', parseInt(_draggables[c1].css('z-index'), 10) - 1);
}
c1 += 1;
}
draggableContainerEl.css('z-index', c1);
}
function moveBackToSlider() {
var c1;
draggableContainerEl.detach(); draggableContainerEl.detach();
draggableContainerEl.css('position', 'static'); draggableContainerEl.css('position', 'static');
...@@ -134,35 +246,22 @@ define(['logme'], function (logme) { ...@@ -134,35 +246,22 @@ define(['logme'], function (logme) {
}); });
}); });
(function (c1) { c1 = 0;
while (c1 < indexes.length) {
if ((inContainer === false) && (indexes[c1].index > DEindex)) {
indexes[c1].el.before(draggableContainerEl);
inContainer = true;
}
c1 += 1; while (c1 < indexes.length) {
if ((inContainer === false) && (indexes[c1].index > DEindex)) {
indexes[c1].el.before(draggableContainerEl);
inContainer = true;
} }
}(0));
c1 += 1;
}
if (inContainer === false) { if (inContainer === false) {
draggableContainerEl.appendTo(state.sliderEl); draggableContainerEl.appendTo(state.sliderEl);
inContainer = true; inContainer = true;
} }
} }
(function (c1) {
while (c1 < _draggables.length) {
if (parseInt(draggableContainerEl.attr('data-old-z-index'), 10) < parseInt(_draggables[c1].css('z-index'), 10)) {
_draggables[c1].css('z-index', parseInt(_draggables[c1].css('z-index'), 10) - 1);
}
c1 += 1;
}
draggableContainerEl.css('z-index', c1);
}(0));
event.preventDefault();
} }
} }
......
common/static/js/capa/drag_and_drop/scroller.js
...@@ -8,8 +8,7 @@ define(['logme'], function (logme) { ...@@ -8,8 +8,7 @@ define(['logme'], function (logme) {
return Scroller; return Scroller;
function Scroller(state) { function Scroller(state) {
var parentEl, moveLeftEl, showEl, moveRightEL, var parentEl, moveLeftEl, showEl, moveRightEL, showElLeftMargin;
moveRightEl_leftMargin;
parentEl = $( parentEl = $(
'<div ' + '<div ' +
...@@ -37,9 +36,9 @@ define(['logme'], function (logme) { ...@@ -37,9 +36,9 @@ define(['logme'], function (logme) {
moveLeftEl.appendTo(parentEl); moveLeftEl.appendTo(parentEl);
moveLeftEl.click(function () { moveLeftEl.click(function () {
state.showElLeftMargin += 100; showElLeftMargin += 100;
state.sliderEl.animate({ state.sliderEl.animate({
'margin-left': state.showElLeftMargin + 'px' 'margin-left': showElLeftMargin + 'px'
}); });
}); });
...@@ -56,7 +55,7 @@ define(['logme'], function (logme) { ...@@ -56,7 +55,7 @@ define(['logme'], function (logme) {
); );
showEl.appendTo(parentEl); showEl.appendTo(parentEl);
state.showElLeftMargin = 0; showElLeftMargin = 0;
state.sliderEl = $( state.sliderEl = $(
'<div ' + '<div ' +
...@@ -82,9 +81,9 @@ define(['logme'], function (logme) { ...@@ -82,9 +81,9 @@ define(['logme'], function (logme) {
moveRightEl.appendTo(parentEl); moveRightEl.appendTo(parentEl);
moveRightEl.click(function () { moveRightEl.click(function () {
state.showElLeftMargin -= 100; showElLeftMargin -= 100;
state.sliderEl.animate({ state.sliderEl.animate({
'margin-left': state.showElLeftMargin + 'px' 'margin-left': showElLeftMargin + 'px'
}); });
}); });
......
common/static/js/capa/drag_and_drop/target_container.js
...@@ -28,15 +28,11 @@ define(['logme'], function (logme) { ...@@ -28,15 +28,11 @@ define(['logme'], function (logme) {
); );
state.targetEl.appendTo(targetElContainer); state.targetEl.appendTo(targetElContainer);
state.targetEl_loaded = false; state.targetElWidth = null;
$('<img/>') // Make in memory copy of image to avoid css issues.
$("<img/>") // Make in memory copy of image to avoid css issues. .attr('src', state.targetEl.attr('src'))
.attr("src", state.targetEl.attr("src")) .load(function () {
.load(function() { state.targetElWidth = this.width;
state.targetEl_height = this.height;
state.targetEl_width = this.width;
state.targetEl_loaded = true;
}); });
state.targetEl.mousemove( state.targetEl.mousemove(
......
common/static/js/capa/drag_and_drop/targets.js
...@@ -8,6 +8,15 @@ define(['logme'], function (logme) { ...@@ -8,6 +8,15 @@ define(['logme'], function (logme) {
return Targets; return Targets;
function Targets(state) { function Targets(state) {
if (state.config.targets.length === 0) {
state.individualTargets = false;
return;
}
state.individualTargets = true;
state.targets = [];
(function (c1) { (function (c1) {
while (c1 < state.config.targets.length) { while (c1 < state.config.targets.length) {
processTarget(state.config.targets[c1]); processTarget(state.config.targets[c1]);
...@@ -18,17 +27,21 @@ define(['logme'], function (logme) { ...@@ -18,17 +27,21 @@ define(['logme'], function (logme) {
return; return;
function processTarget(obj) { function processTarget(obj) {
var targetElOffset, tEl, left, top; var targetElOffset, tEl, left, borderCss;
if (state.targetEl_loaded === false) { if (state.targetElWidth === null) {
window.setTimeout(function () { window.setTimeout(function () {
processTarget(obj); processTarget(obj);
}, 50); }, 50);
return; return;
} }
left = obj.x + 0.5 * (state.targetEl.parent().width() - state.targetEl_width); left = obj.x + 0.5 * (state.targetEl.parent().width() - state.targetElWidth);
top = obj.y
borderCss = '';
if (state.config.target_outline === true) {
borderCss = 'border: 1px solid black; ';
}
tEl = $( tEl = $(
'<div ' + '<div ' +
...@@ -37,15 +50,24 @@ define(['logme'], function (logme) { ...@@ -37,15 +50,24 @@ define(['logme'], function (logme) {
'position: absolute; ' + 'position: absolute; ' +
'width: ' + obj.w + 'px; ' + 'width: ' + obj.w + 'px; ' +
'height: ' + obj.h + 'px; ' + 'height: ' + obj.h + 'px; ' +
'top: ' + top + 'px; ' + 'top: ' + obj.y + 'px; ' +
'left: ' + left + 'px; ' + 'left: ' + left + 'px; ' +
'border: 1px solid black; ' + borderCss +
'" ' + '" ' +
'data-target-id="' + obj.id + '" ' + 'data-target-id="' + obj.id + '" ' +
'></div>' '></div>'
); );
tEl.appendTo(state.targetEl.parent()); tEl.appendTo(state.targetEl.parent());
state.targets.push({
'id': obj.id,
'offset': tEl.offset(),
'w': obj.w,
'h': obj.h,
'el': tEl,
'draggable': []
});
} }
} }
}); });
......
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