Форум

IVAAAAN · #1 (**permalink**) 09.07.2013, 15:28

Пишу свой Drag-n-Drop, вот сделал, но как-то когда перетаскиваю то элемент идет не плавно, прерывисто

var drag = false;
	var dragElem = document.getElementById('drag');
	var x,y;
	dragElem.addEventListener('mousedown', function(e){
		drag = true;


	});
	dragElem.addEventListener('mouseup', function(){
		drag = false;
	});
	dragElem.addEventListener('mousemove', function(e){
		if(drag){
		x = e.pageX;
		y = e.pageY;
     	$("#drag").css({'left':x, 'top':y});

	}
	});

почему так?

skrudjmakdak · #2 (**permalink**) 09.07.2013, 15:39

правельней не через флаг делать, а сброс события при отпускании
т.е. приблизительно так:
dragElem.addEventListener('mouseup', function(){
dragElem.mousemove = undefined;
});
а когда идет клик по элементу то необходимо привязывать эту функцию.. и привязывать желательно не к текущему элементу а к объекту document

dmitriymar · #3 (**permalink**) 09.07.2013, 15:42

Сообщение от IVAAAAN

dragElem.addEventListener('mousemove', function(e){
13 if(drag){
14 x = e.pageX;
15 y = e.pageY;
16 $("#drag").css({'left':x, 'top':y});
18 }

а чего уж там ? сдвинули на 20 пикселов за пару милесекунд , заставили 20 раз перерисоваться в то в то время как глаз различает http://ru.wikipedia.org/wiki/%D0%9A%...BE%D1%82%D0%B0

IVAAAAN · #4 (**permalink**) 09.07.2013, 15:45

Сообщение от dmitriymar

а чего уж там ? сдвинули на 20 пикселов за пару милесекунд , заставили 20 раз перерисоваться в то в то время как глаз различает http://ru.wikipedia.org/wiki/%D0%9A%...BE%D1%82%D0%B0

ну а как тогда делать то правильно?

dmitriymar · #5 (**permalink**) 09.07.2013, 15:46

Сообщение от IVAAAAN

ну а как тогда делать то правильно?

гугл. если в пределлах 15 -30 мс было множество мувов запущенно -отрисовать последний

рони · #6 (**permalink**) 09.07.2013, 15:47

IVAAAAN,
Drag and drop

ruslan_mart · #7 (**permalink**) 09.07.2013, 15:49

<div onmouserdown="drag(event, this)" style="background:red; height:100px; width:100px"></div>

function drag(a, b)
{
   a = a || window.event;
   b.clicked = true;
   b.mousePosX = a.clientX;
   b.mousePosY = a.clientY;
   if(a.preventDefault) a.preventDefault(); 
   else a.returnValue = false;
   document.onmouseup = function()
   {
      b.clicked = false;
   }
   document.onmousemove = function(a)
   {
      a = a || window.event;
      if(b.clicked)
      {
         posLeft = !b.style.marginLeft ? b.offsetLeft : parseInt(b.style.marginLeft);
         posTop = !b.style.marginTop ? b.offsetTop : parseInt(b.style.marginTop);
         mousePosX = a.clientX;
         mousePosY = a.clientY;
         b.style.marginLeft = posLeft + mousePosX - b.mousePosX + 'px';
         b.style.marginTop = posTop + mousePosY - b.mousePosY + 'px';
         b.mousePosX = mousePosX;
         b.mousePosY = mousePosY;
      }
   }
}

dmitriymar · #8 (**permalink**) 09.07.2013, 15:54

Сообщение от Ruslan_xDD

posLeft = !b.style.marginLeft ? b.offsetLeft : parseInt(b.style.marginLeft);

угу , всякий раз дёргать dom спрашивая у элемента его позицию parseInt(b.style.marginLeft) ....

рони · #9 (**permalink**) 09.07.2013, 15:54

Сообщение от IVAAAAN

но как-то когда перетаскиваю то элемент идет не плавно, прерывисто

зачем вам jquery если вы не используите его Drag-n-Drop

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 div{
   background-color: #CC0000;
   height: 100px;
   width: 100px;
   position: relative;
   cursor: pointer;
 }

  </style>
</head>
<body>
 <div id="drag"></div>
<script>
var drag = false;
	var dragElem = document.getElementById('drag');
	var x,y;
	dragElem.addEventListener('mousedown', function(e){
		drag = true;


	});
	dragElem.addEventListener('mouseup', function(){
		drag = false;
	});
	document.addEventListener('mousemove', function(e){
		if(drag){
		x = e.pageX;
		y = e.pageY;
        dragElem.style.left = x-50+'px'
        dragElem.style.top = y-50+'px'
	}
	});
</script>
</body>
</html>

skrudjmakdak · #10 (**permalink**) 09.07.2013, 16:02

мой варик:

<html>
	<head>
		<style type="text/css">
div
{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
cursor: pointer;
}
		</style>

	</head>
	<body>
		<div id="div" style="left: 0px; top: 0px;"></div>
		<script type="text/javascript">
var div = document.getElementById('div');

var x, y;

function mousePageXY(e)
	{
	var x = 0, y = 0;
	if (!e) e = window.event;
	if (e.pageX || e.pageY)
		{
		x = e.pageX;
		y = e.pageY;
		}
	else 
		if (e.clientX || e.clientY)
		{
		x=e.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft)-document.documentElement.clientLeft;
		y=e.clientY+(document.documentElement.scrollTop||document.body.scrollTop)-document.documentElement.clientTop;
		}
	return {"x":x, "y":y};
	}

var move = function(e)
	{
	var k = mousePageXY(e);
	div.style.left = -x + k.x + 'px';
	div.style.top = -y + k.y + 'px';
	//console.log(k);
	}

div.onmousedown = function(e)
	{
	var k = mousePageXY(e);
	x = k.x - parseInt(this.style.left);
	y = k.y - parseInt(this.style.top);
	document.onmousemove = move;
	//console.log(k);
	}

document.onmouseup = function(e)
	{
	document.onmousemove = undefined;
	}
		</script>
	</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript