var div = document.getElementById('circle'); var listener = function(e) { div.style.left = e.pageX + "px"; div.style.top = e.pageY + "px"; }; function move() { document.addEventListener('mousemove', listener); } function stop() { document.removeEventListener('mousemove', listener); } 
 .block1 { width: 100px; height: 100px; position: absolute; left: 50px; top: 50px; border-radius: 50%; background: blue; } 
 <div class="block1" id="circle" onMouseDown="move()" onKeyDown="stop()"> </div>

  • 2
    I recommend to add a description of the problem - tutankhamun
  • Yes, the problem is what? :) - Sergey Snegirev
  • there actually instead of onKeyDown should be onMouseUp. My onMouseUp does not work. - Aidana Kurmasheva
  • You have a problem in that onmouseup is not called on the circle, because he does not catch this event. Make the circle exactly under the cursor (for example, e.pageX -50 + "px"; e.pageY -50 + "px" - move it to the listener ) and then onmouseup will be caught around - BOPOH

2 answers 2

Use jquery draggable .

 $("#draggable").draggable(); 
 #draggable { width: 100px; height: 100px; position: absolute; left: 50px; top: 50px; border-radius: 50%; background: blue; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/overcast/jquery-ui.css" /> <div id="draggable" class="ui-widget-content"></div>

JsFiddle example

    1. Make object positioning absolute
    2. At the event of the pressed button, take the cursor positioning and read it until the mouse button is pressed
    3. While moving with the button pressed, add the coordinates of the cursor to the element that you want to move.

    The solution to this problem is described in great detail here, including cross-browser solutions: Drag & Drop