Перетаскивание элемента
Дорогие форумчане, розьясните пожалуйста, как мне данный код:
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 (Начало движения: сохранение позиции курсора в элементе (ДЕМО)) |
Попробуйте такой вариант
/* спинная часть */ 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); И таскаем форму за заголовок. Конечно нужна поддержкам стилями. |
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> Но не работает, что то не так сделал? |
alma95,
http://plnkr.co/edit/OJ1lR2TrkAT3cNG44Slo?p=preview и кстати там нету функции fixEvent,строки 35,46 закоментил. |
JsConAp,
Спасибо большое) А что значит функция: fixEvent ?? |
|
JsConAp,
Понял, спасибо большое :) Тему можно закрыть. Решение было в подключении скрипта после самого кода. |
..
|
alma95,
Молодец. |
Часовой пояс GMT +3, время: 11:37. |