Commit 4594986b by Valera Rozuvan Committed by Alexander Kryklia

Client side drag and drop. Work in progress. Part 4.

parent de954a41
......@@ -12,7 +12,7 @@ define(['logme'], function (logme) {
'<div ' +
'style=" ' +
'border: 1px solid black; ' +
'overflow: hidden; ' +
// 'overflow: hidden; ' +
'clear: both; ' +
'" ' +
'></div>'
......
......@@ -10,15 +10,14 @@ define(['logme'], function (logme) {
function Draggables(state) {
(function (i) {
while (i < state.config.draggable.length) {
processDraggable(state.config.draggable[i]);
processDraggable(state.config.draggable[i], i + 1);
i += 1;
}
}(0));
function processDraggable(obj) {
var draggableContainerEl;
logme(obj);
function processDraggable(obj, index) {
var draggableContainerEl, imgEl, inContainer,
mouseDown;
draggableContainerEl = $(
'<div ' +
......@@ -27,17 +26,113 @@ define(['logme'], function (logme) {
'height: 100px; ' +
'display: inline; ' +
'float: left; ' +
'overflow: hidden; ' +
'" ' +
'data-draggable-position-index="' + index + '" ' +
'></div>'
);
if (obj.icon.length > 0) {
imgEl = $(
'<img ' +
'src="' + state.config.imageDir + '/' + obj.icon + '" ' +
'/>'
);
draggableContainerEl.append(imgEl);
}
if (obj.label.length > 0) {
draggableContainerEl.append(
$('<img src="' + state.config.imageDir + '/' + obj.icon + '" />')
$('<div style="clear: both; text-align: center;">' + obj.label + '</div>')
);
}
draggableContainerEl.appendTo(state.sliderEl);
inContainer = true;
mouseDown = false;
draggableContainerEl.mousedown(function (event) {
if (mouseDown === false) {
if (inContainer === true) {
draggableContainerEl.detach();
draggableContainerEl.css('position', 'absolute');
draggableContainerEl.css('left', (event.pageX - 50));
draggableContainerEl.css('top', (event.pageY - 50));
draggableContainerEl.appendTo(state.containerEl);
inContainer = false;
}
mouseDown = true;
event.preventDefault();
}
});
draggableContainerEl.mouseup(function (event) {
if (mouseDown === true) {
mouseDown = false;
checkLandingElement(event);
event.preventDefault();
}
});
draggableContainerEl.mousemove(function (event) {
if (mouseDown === true) {
draggableContainerEl.css('left', (event.pageX - 50));
draggableContainerEl.css('top', (event.pageY - 50));
event.preventDefault();
}
});
draggableContainerEl.mouseleave(function (event) {
if (mouseDown === true) {
mouseDown = false;
checkLandingElement(event);
event.preventDefault();
}
});
return;
function checkLandingElement(event) {
var offsetDE, children;
offsetDE = draggableContainerEl.offset();
if (
(offsetDE.left < state.targetEl.offset().left) ||
(offsetDE.left + 100 > state.targetEl.offset().left + state.targetEl.width()) ||
(offsetDE.top < state.targetEl.offset().top) ||
(offsetDE.top + 100 > state.targetEl.offset().top + state.targetEl.height())
) {
draggableContainerEl.detach();
draggableContainerEl.css('position', 'static');
children = state.sliderEl.children();
if (children.length === 0) {
draggableContainerEl.appendTo(state.sliderEl);
} else {
state.sliderEl.children().each(function (index, value) {
if (inContainer === false) {
if (parseInt($(value).attr('data-draggable-position-index'), 10) + 1 === parseInt(draggableContainerEl.attr('data-draggable-position-index'), 10)) {
$(value).after(draggableContainerEl);
inContainer = true;
} else if (parseInt($(value).attr('data-draggable-position-index'), 10) - 1 === parseInt(draggableContainerEl.attr('data-draggable-position-index'), 10)) {
$(value).before(draggableContainerEl);
inContainer = true;
}
}
});
}
if (inContainer === false) {
draggableContainerEl.appendTo(state.sliderEl);
}
}
}
}
}
......
......@@ -37,7 +37,7 @@ define(['logme'], function (logme) {
moveLeftEl.appendTo(parentEl);
moveLeftEl.click(function () {
state.showElLeftMargin -= 100;
state.showElLeftMargin += 100;
state.sliderEl.animate({
'margin-left': state.showElLeftMargin + 'px'
});
......@@ -82,7 +82,7 @@ define(['logme'], function (logme) {
moveRightEl.appendTo(parentEl);
moveRightEl.click(function () {
state.showElLeftMargin += 100;
state.showElLeftMargin -= 100;
state.sliderEl.animate({
'margin-left': state.showElLeftMargin + 'px'
});
......
......@@ -48,6 +48,8 @@ define(['logme'], function (logme) {
mouseMoveDiv.appendTo(targetElContainer);
targetElContainer.appendTo(state.containerEl);
state.targetElOffset = state.targetEl.offset();
}
});
......
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