Drag-n-Drop тормозит
Пишу свой 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});
}
});
почему так? |
правельней не через флаг делать, а сброс события при отпускании
т.е. приблизительно так: dragElem.addEventListener('mouseup', function(){ dragElem.mousemove = undefined; }); а когда идет клик по элементу то необходимо привязывать эту функцию.. и привязывать желательно не к текущему элементу а к объекту document |
Цитата:
|
Цитата:
|
Цитата:
|
IVAAAAN,
Drag and drop |
<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;
}
}
}
|
Цитата:
|
drag and 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>
|
мой варик:
<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>
|
| Часовой пояс GMT +3, время: 10:54. |