10.07.2015, 21:37
|
 |
Аспирант
|
|
Регистрация: 01.04.2012
Сообщений: 37
|
|
|
Перетаскивание элемента
Дорогие форумчане, розьясните пожалуйста, как мне данный код:
var dragMaster = (function() {
var dragObject
var mouseOffset
// получить сдвиг target относительно курсора мыши
function getMouseOffset(target, e) {
var docPos = getPosition(target)
return {x:e.pageX - docPos.x, y:e.pageY - docPos.y}
}
function mouseUp(){
dragObject = null
// очистить обработчики, т.к перенос закончен
document.onmousemove = null
document.onmouseup = null
document.ondragstart = null
document.body.onselectstart = null
}
function mouseMove(e){
e = fixEvent(e)
with(dragObject.style) {
position = 'absolute'
top = e.pageY - mouseOffset.y + 'px'
left = e.pageX - mouseOffset.x + 'px'
}
return false
}
function mouseDown(e) {
e = fixEvent(e)
if (e.which!=1) return
dragObject = this
// получить сдвиг элемента относительно курсора мыши
mouseOffset = getMouseOffset(this, e)
// эти обработчики отслеживают процесс и окончание переноса
document.onmousemove = mouseMove
document.onmouseup = mouseUp
// отменить перенос и выделение текста при клике на тексте
document.ondragstart = function() { return false }
document.body.onselectstart = function() { return false }
return false
}
return {
makeDraggable: function(element){
element.onmousedown = mouseDown
}
}
}())
function getPosition(e){
var left = 0
var top = 0
while (e.offsetParent){
left += e.offsetLeft
top += e.offsetTop
e = e.offsetParent
}
left += e.offsetLeft
top += e.offsetTop
return {x:left, y:top}
}
в html интегрировать?
Пробовал так:
<div id="dragObject">
<div style="background: blue;width:100px;height:100px;"></div>
</div>
Да ничего не сработало.
__________________________________________________ _______
Этот код я взял здесь: http://javascript.ru/ui/draganddrop#...ora-v-elemente (Начало движения: сохранение позиции курсора в элементе (ДЕМО))
|
|
11.07.2015, 07:32
|
|
Профессор
|
|
Регистрация: 23.10.2010
Сообщений: 2,718
|
|
Попробуйте такой вариант
/* спинная часть */
var W=window,
D=W.document,
elem_rect={
left:function(elem){
var b = D.body,
e = D.documentElement,
x = W.pageXOffset || e.scrollLeft || b.scrollLeft,
c = e.clientLeft || b.clientLeft || 0;
return Math.round(elem.getBoundingClientRect().left+x-c);
},
top:function(elem){
var b = D.body,
e = D.documentElement,
y = W.pageYOffset || e.scrollTop || b.scrollTop,
c = e.clientTop || b.clientTop || 0;
return Math.round(elem.getBoundingClientRect().top+y-c);
}
};
/* головная часть
@param h html element the handle of the
@param div html element the draggable one
то есть за h мы будем таскать div,
все имена и совпадения случайные :)
*/
var dragElem=function(h,div){
var dx,dy,
mouseUp = function (){
W.removeEventListener('mousemove', divMove, true);
},
mouseDown=function (e){
dx=e.clientX-elem_rect.left(div);
dy=e.clientY-elem_rect.top(div);
W.addEventListener('mousemove', divMove, true);
},
divMove=function(e){
div.style.left = (e.clientX-dx) + 'px';
div.style.top = (e.clientY-dy) + 'px';
};
h.addEventListener('mousedown', mouseDown, false);
W.addEventListener('mouseup', mouseUp, false);
};
/* применение например */
dragElem(form.querySelector('h3'),form);
И таскаем форму за заголовок. Конечно нужна поддержкам стилями.
|
|
11.07.2015, 14:17
|
|
Аспирант
|
|
Регистрация: 01.04.2012
Сообщений: 37
|
|
kostyanet,
Написал так:
<!DOCTYPE html>
<html>
<head>
<script>
/* спинная часть */
var W=window,
D=W.document,
elem_rect={
left:function(elem){
var b = D.body,
e = D.documentElement,
x = W.pageXOffset || e.scrollLeft || b.scrollLeft,
c = e.clientLeft || b.clientLeft || 0;
return Math.round(elem.getBoundingClientRect().left+x-c);
},
top:function(elem){
var b = D.body,
e = D.documentElement,
y = W.pageYOffset || e.scrollTop || b.scrollTop,
c = e.clientTop || b.clientTop || 0;
return Math.round(elem.getBoundingClientRect().top+y-c);
}
};
/* головная часть
@param h html element the handle of the
@param div html element the draggable one
то есть за h мы будем таскать div,
все имена и совпадения случайные :)
*/
var dragElem=function(h,div){
var dx,dy,
mouseUp = function (){
W.removeEventListener('mousemove', divMove, true);
},
mouseDown=function (e){
dx=e.clientX-elem_rect.left(div);
dy=e.clientY-elem_rect.top(div);
W.addEventListener('mousemove', divMove, true);
},
divMove=function(e){
div.style.left = (e.clientX-dx) + 'px';
div.style.top = (e.clientY-dy) + 'px';
};
h.addEventListener('mousedown', mouseDown, false);
W.addEventListener('mouseup', mouseUp, false);
};
/* применение например */
dragElem(form.querySelector('h3'),form);
</script>
</head>
<body>
<div id="dragElem">
<div style="background: blue;width:100px;height:100px;"><h3>ffff</h3></div>
</div>
</body>
</html>
Но не работает, что то не так сделал?
|
|
11.07.2015, 15:07
|
|
Аспирант
|
|
Регистрация: 01.04.2012
Сообщений: 37
|
|
|
JsConAp,
Спасибо большое)
А что значит функция: fixEvent ??
|
|
11.07.2015, 15:10
|
 |
Интересующийся
|
|
Регистрация: 22.02.2015
Сообщений: 24
|
|
|
|
|
11.07.2015, 15:53
|
|
Аспирант
|
|
Регистрация: 01.04.2012
Сообщений: 37
|
|
JsConAp,
Понял, спасибо большое 
Тему можно закрыть. Решение было в подключении скрипта после самого кода.
|
|
12.07.2015, 01:18
|
|
Аспирант
|
|
Регистрация: 01.04.2012
Сообщений: 37
|
|
|
..
Последний раз редактировалось alma95, 12.07.2015 в 02:43.
|
|
13.07.2015, 09:28
|
|
Новичок на форуме
|
|
Регистрация: 29.08.2011
Сообщений: 6
|
|
|
alma95,
Молодец.
|
|
|
|
