Drag and drop problem on JS

Asked

Viewed 37 times

-1

I use the following code to move Ivs (I don’t know if this is called drag and drop)

function Drag(Janela){
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  Janela = document.getElementById(Janela);
  document.onmousedown = DragMouseDown;
  function DragMouseDown(e){
    e = e || window.event;
    e.preventDefault();
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmousemove = ElementDrag;
    document.onmouseup = CloseDragElement;
  }
  function ElementDrag(e){
    e = e || window.event;
    e.preventDefault();
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    Janela.style.top = (Janela.offsetTop - pos2) + "px";
    Janela.style.left = (Janela.offsetLeft - pos1) + "px";
  }
  function CloseDragElement(){
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

The problem is that when a div is moved, I can’t type in the inputs inside it

javascript html

  • I don’t see anything in your code that can motivate the problem you describe... you can create an example that shows it happening?

  • document.onmouseup = null; is aggressive to the browser, would say even wrong. Do not appear errors in the console?

  • no error on console....

  • input with type number, for example, I click on the arrows to increase or decrease and nothing happens...

1 answer

0


I solved the problem. If I take onmousedown out of the document and move to the window title bar, resolve!

function Drag(Janela, Bar){
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  Janela = document.getElementById(Janela);
  Bar.onmousedown = DragMouseDown;
  function DragMouseDown(e){
    e = e || window.event;
    e.preventDefault();
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmousemove = ElementDrag;
    document.onmouseup = CloseDragElement;
  }
  function ElementDrag(e){
    e = e || window.event;
    e.preventDefault();
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    Janela.style.top = (Janela.offsetTop - pos2) + "px";
    Janela.style.left = (Janela.offsetLeft - pos1) + "px";
  }
  function CloseDragElement(){
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.