Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Перетаскивание элемента (https://javascript.ru/forum/misc/56937-peretaskivanie-ehlementa.html)

alma95 10.07.2015 21: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 (Начало движения: сохранение позиции курсора в элементе (ДЕМО))

kostyanet 11.07.2015 07:32

Попробуйте такой вариант

/* спинная часть */
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);


И таскаем форму за заголовок. Конечно нужна поддержкам стилями.

alma95 11.07.2015 14:17

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>

Но не работает, что то не так сделал?

JsConAp 11.07.2015 14:53

alma95,
http://plnkr.co/edit/OJ1lR2TrkAT3cNG44Slo?p=preview

и кстати там нету функции fixEvent,строки 35,46 закоментил.

alma95 11.07.2015 15:07

JsConAp,
Спасибо большое)
А что значит функция: fixEvent ??

JsConAp 11.07.2015 15:10

Мышь: IE8-, исправление события
:)

alma95 11.07.2015 15:53

JsConAp,
Понял, спасибо большое :)
Тему можно закрыть. Решение было в подключении скрипта после самого кода.

alma95 12.07.2015 01:18

..

Льюк 13.07.2015 09:28

alma95,
Молодец.


Часовой пояс GMT +3, время: 11:37.