Файл 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: red !important;
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(event){
if (globalDraggingElement) {
dropElement(event);
}
});
var globalMouseCursorOffset = null;
// Начинаем перетаскивать элемент
function startDragElement (event) {
if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'SELECT' || event.target.nodeName === 'TEXTAREA') {
globalDraggingElement = null;
return;
}
globalMouseCursorOffset = {
x: event.pageX - globalDraggingElement.position().left
, y: event.pageY - globalDraggingElement.position().top
};
globalDraggingElement.addClass('drag');
}
// Передвигаем перетаскиваемый элемент
function moveElement (event) {
globalDraggingElement.css({
left: event.pageX - globalMouseCursorOffset.x
, top: event.pageY - globalMouseCursorOffset.y
});
}
// Сбрасываем перетаскиваемый элемент в нужное место
function dropElement (event) {
// Вставка перетаскиваемого элемента
var dropTargetElements = $('div.two')
, dropTargetElementsLength = dropTargetElements.length
, dropTargetElement
, i;
for (i = 0; i < dropTargetElementsLength; i++) {
dropTargetElement = dropTargetElements.eq(i);
if (
(event.pageX > dropTargetElement.offset().left)
&& (event.pageX < dropTargetElement.offset().left + dropTargetElement.width())
&& (event.pageY > dropTargetElement.offset().top)
&& (event.pageY < dropTargetElement.offset().top + dropTargetElement.height())
) {
dropTargetElement.append(globalDraggingElement);
// Запуск функции после сброса перетаскиваемого элемента
dropResult();
}
}
// Строку с перетаскиваемым элементом мы уже вставили, поэтому просто убираем класс "drag"
globalDraggingElement.removeClass('drag');
globalDraggingElement = null;
}
function dropResult () {
console.log('Element dropped.');
}
}
);
Комментариев нет:
Отправить комментарий