Перемещение DIV по экрану

Question

var move = function() { 

    var figur_1 = document.getElementById('figur_1'); 

    figur_1.style.top++; 

    window.requestAnimationFrame(move); 

} 

move(); 

Я хочу, чтобы переместить DIV с идентификатором figur_1 над экраном.

Как это можно сделать?

var move = function() { 

    var figur_1 = document.getElementById('figur_1'); 


    figur_1.style.position = 'absolute'; 
    figur_1.style.top += '1px'; 


    window.requestAnimationFrame(move); 

} 

move(); 

не анимация, тоже. Он просто перемещает DIV 1px вниз!

Answer 1

Я нашел способ легким и коротким для перемещения элемента с несколькими кодами.

var move = function() { 

    var figur_1 = document.getElementById('figur_1'); 

    figur_1.style.position = "absolute"; 
    figur_1.style.top = "100px"; 
} 

move(); 

var move = function() { 
 

 
    var figur_1 = document.getElementById('figur_1'); 
 

 
    figur_1.style.position = "absolute"; 
 
    figur_1.style.top = "100px"; 
 
} 
 

 
move();

<div id="figur_1">TEST</div>

т Вы также можете использовать .style.bottom/top/left/right

Answer 2

Вы не можете достичь этой функциональности одной функцией. Вам нужно работать хотя бы с двумя функциями. Один из них - mousedown, а другой - mouseup. Потому что вы больше не хотите перетаскивать действие после того, как пользователь выпустит ключ мыши.

HTML:

<div id="figur_1"> 
    This div is movable. Lets try dragging. 
</div> 

CSS:

#figur_1{ 
    position: absolute; 
    height: 100px; 
    width: 100px; 
    background: #0000ff; 
    left: 0px; 
    top: 0px; 
    color: yellow; 
    cursor: move; 
} 

JS:

figur_1.onmousedown = function (e) { 
    var figur_1 = document.getElementById("figur_1"); 

    var left = parseInt(window.getComputedStyle(figur_1).getPropertyValue("left")); 
    var top = parseInt(window.getComputedStyle(figur_1).getPropertyValue("top")); 
    var mouseX = e.clientX; 
    var mouseY = e.clientY; 

    document.onmousemove = function (e) { 
     var dx = mouseX - e.clientX; 
     var dy = mouseY - e.clientY; 

     figur_1.style.left = left - dx + "px"; 
     figur_1.style.top = top - dy + "px"; 
    }; 
}; 

figur_1.onmouseup = function() { 
    document.onmousemove = null; 
}; 

Вот это рабочий jsfiddle: https://jsfiddle.net/sajibche/4xfuemrb/

Answer 3

Почему бы вам не попробовать это перетаскивание ?

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop