Файл index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="style/default/index.css" rel="stylesheet" type="text/css" />
<script data-main="js/index.js" src="js/lib/require/require.js" type="text/javascript"></script>
<title>Drag</title>
</head>
<body>
<div id="grid">
<div id="one"></div>
<div class="two"></div>
<div class="two"></div>
</div>
</body>
</html>
Файл index.css
/*****************************************************************\
Drag
\*****************************************************************/
div#grid {
position: relative;
margin-top: 100px;
margin-left: 100px;
border: 1px solid black;
}
div#one {
width: 100px;
height: 100px;
background-color: green;
}
div.two {
width: 300px;
height: 300px;
margin-top: 200px;
margin-left: 200px;
background-color: blue;
}
.drag {
z-index: 100;
position: absolute;
background-color: #50876b;
color: #ffffff;
cursor: move !important;
}
Файл index.js
require.config({
paths: {
jquery: 'lib/jquery/jquery'
}
});
require(
[
'jquery'
]
, function(
$
) {
var globalDraggingElement = null;
$('div#one').mousedown(function(event){
globalDraggingElement = $(this);
startDragElement(event);
event.preventDefault();
});
$(document).mousemove(function(event){
if (globalDraggingElement) {
moveElement(event);
}
event.preventDefault();
});
$(document).mouseup(function(){
if (globalDraggingElement) {
dropElement();
}
});
var globalDraggingElementOriginalPosition = null
, globalStartDragMouseCursorPosition = null;
// Начинаем перетаскивать элемент
function startDragElement (event) {
if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'SELECT' || event.target.nodeName === 'TEXTAREA') {
globalDraggingElement = null;
return;
}
globalDraggingElementOriginalPosition = globalDraggingElement.position();
globalStartDragMouseCursorPosition = {
left: event.pageX
, top: event.pageY
};
console.log('Original Position X: ' + globalDraggingElementOriginalPosition.left
+ ' | Original Position Y: ' + globalDraggingElementOriginalPosition.top);
console.log('Cursor Start Position X: ' + globalStartDragMouseCursorPosition.left
+ ' | Cursor Start Position Y: ' + globalStartDragMouseCursorPosition.top);
globalDraggingElement.addClass('drag');
}
var globalCurrentPositionOfDraggingElement = null
, globalResultPositionOfDraggingElement = null
, globalDropTargetElement = null;
// Передвигаем перетаскиваемый элемент
function moveElement (event) {
globalCurrentPositionOfDraggingElement = {
left: event.pageX - globalStartDragMouseCursorPosition.left
, top: event.pageY - globalStartDragMouseCursorPosition.top
};
console.log('CurrentPositionOfDraggingElement X: ' + globalCurrentPositionOfDraggingElement.left
+ ' | CurrentPositionOfDraggingElement Y: ' + globalCurrentPositionOfDraggingElement.top);
globalResultPositionOfDraggingElement = {
left: globalDraggingElementOriginalPosition.left + globalCurrentPositionOfDraggingElement.left
, top: globalDraggingElementOriginalPosition.top + globalCurrentPositionOfDraggingElement.top
};
console.log('ResultPositionOfDraggingElement X: ' + globalResultPositionOfDraggingElement.left
+ ' | ResultPositionOfDraggingElement Y: ' + globalResultPositionOfDraggingElement.top);
globalDraggingElement.css({
left: globalResultPositionOfDraggingElement.left
, top: globalResultPositionOfDraggingElement.top
});
globalDropTargetElement = findDropTargetElement (globalResultPositionOfDraggingElement.left, globalResultPositionOfDraggingElement.top);
}
// Определяем над каким элементом находится перетаскиваемый элемент
function findDropTargetElement (x, y) {
var dropTargetElements = $('div.two')
, dropTargetElementsLength = dropTargetElements.length
, dropTargetElement
, dropTargetElementX
, dropTargetElementY
, dropTargetElementWidth
, dropTargetElementHeight
, i;
for (i = 0; i < dropTargetElementsLength; i++) {
dropTargetElement = dropTargetElements.eq(i);
dropTargetElementX = dropTargetElement.offset().left;
dropTargetElementY = dropTargetElement.offset().top;
dropTargetElementWidth = dropTargetElement.width() / 2;
dropTargetElementHeight = dropTargetElement.height() / 2;
if ( (x > (dropTargetElementX - dropTargetElementWidth)) && (y < (dropTargetElementX + dropTargetElementWidth))
|| (y > (dropTargetElementY - dropTargetElementHeight)) && (y < (dropTargetElementY + dropTargetElementHeight))
) {
return dropTargetElement;
}
}
return null;
}
// Сбрасываем перетаскиваемый элемент в нужное место
function dropElement () {
// Вставка перетаскиваемого элемента
if (globalDropTargetElement) {
globalDropTargetElement.append(globalDraggingElement);
}
// Строку с перетаскиваемым элементом мы уже вставили, поэтому просто убираем класс "drag"
globalDraggingElement.removeClass('drag');
globalDraggingElement = null;
// Запуск функции после сброса перетаскиваемого элемента
dropResult();
}
function dropResult () {
console.log('Element dropped.');
}
}
);
Комментариев нет:
Отправить комментарий