Como posicionar um DIV em coordenadas específicas?

120

Quero posicionar um DIV em coordenadas específicas? Como posso fazer isso usando Javascript?

Adham
fonte

Respostas:

170

Faça o script de suas propriedades lefte topcomo o número de pixels da borda esquerda e da borda superior, respectivamente. Deve terposition: absolute;

var d = document.getElementById('yourDivId');
d.style.position = "absolute";
d.style.left = x_pos+'px';
d.style.top = y_pos+'px';

Ou faça isso como uma função para que você possa anexá-lo a um evento como onmousedown

function placeDiv(x_pos, y_pos) {
  var d = document.getElementById('yourDivId');
  d.style.position = "absolute";
  d.style.left = x_pos+'px';
  d.style.top = y_pos+'px';
}
Michael Berkowski
fonte
Eu recupero as coordenadas x, y do clique do mouse, como posso exibir a Div na posição do mouse?
Adham
@adham você já tem as coordenadas x, y? Basta aplicá-los no lugar de x_pos,y_pos
Michael Berkowski
ele arredonda a posição sempre ... é possível definir a posição como 1,6 em vez de se tornar 2 ou 1.
Muhammad Umer
e se tivermos cordinates, (x1, y2) (x2, y2) (x3, y3) (x4, y4)?
John dey
Estou fazendo exatamente a mesma coisa, mas meu div não fica posicionado perto do cordão do meu mouse. No entanto, ele se move para a posição inicial superior da página principal após o cabeçalho. Quero dizer o mestre Div. Alguém pode me ajudar a entender por quê?
JNPW
32

Você não precisa usar Javascript para fazer isso. Usando o CSS simples:

div.blah {
  position:absolute;
  top: 0; /*[wherever you want it]*/
  left:0; /*[wherever you want it]*/
}

Se você acha que deve usar javascript ou está tentando fazer isso dinamicamente usando JQuery, isso afeta todos os divs da classe "blah":

var blahclass =  $('.blah'); 
blahclass.css('position', 'absolute');
blahclass.css('top', 0); //or wherever you want it
blahclass.css('left', 0); //or wherever you want it

Alternativamente, se você deve usar o antigo javascript regular, você pode pegar pelo id

var domElement = document.getElementById('myElement');// don't go to to DOM every time you need it. Instead store in a variable and manipulate.
domElement.style.position = "absolute";
domElement.style.top = 0; //or whatever 
domElement.style.left = 0; // or whatever
Dave
fonte
que? você deve usar .class em vez de myElement e top & left em vez de x e y, não é?
TMS
Além de obter uma referência a um elemento HTML com document.getElemtentById(), você também pode referenciá-lo com um seletor arbitrário semelhante a jQuery com document.querySelector () e suas muitas variações
Shammel Lee
9

bem, depende se tudo o que você quer é posicionar um div e nada mais, você não precisa usar java script para isso. Você pode fazer isso apenas por CSS. O que importa é em relação a qual contêiner você deseja posicionar seu div, se você deseja posicioná-lo em relação ao corpo do documento, seu div deve ser posicionado de forma absoluta e seu contêiner não deve ser posicionado de forma relativa ou absoluta, nesse caso seu div será posicionado em relação ao contêiner.

Caso contrário, com Jquery, se você deseja posicionar um elemento em relação ao documento, você pode usar o método offset ().

$(".mydiv").offset({ top: 10, left: 30 });

se relativo para deslocar a posição do pai, o pai relativo ou absoluto. então use o seguinte ...

var pos = $('.parent').offset();
var top = pos.top + 'no of pixel you want to give the mydiv from top relative to parent';
var left = pos.left + 'no of pixel you want to give the mydiv from left relative to parent';

$('.mydiv').css({
  position:'absolute',
  top:top,
  left:left
});
Ehtesham
fonte
Ótimo @Ehtesham. Realmente me ajudou.
RN Kushwaha
2

Você também pode usar a propriedade css fixa de posição.

<!-- html code --> 
<div class="box" id="myElement"></div>

/* css code */
.box {
    position: fixed;
}

// js code

document.getElementById('myElement').style.top = 0; //or whatever 
document.getElementById('myElement').style.left = 0; // or whatever
Pankaj Bisht
fonte
2

Aqui está um artigo devidamente descrito e também um exemplo com o código. Coordenadas JS

De acordo com a exigência. abaixo está o código que foi finalmente postado naquele artigo. Precisa chamar a função getOffset e passar o elemento html que retorna seus valores superior e esquerdo .

function getOffsetSum(elem) {
  var top=0, left=0
  while(elem) {
    top = top + parseInt(elem.offsetTop)
    left = left + parseInt(elem.offsetLeft)
    elem = elem.offsetParent        
  }

  return {top: top, left: left}
}


function getOffsetRect(elem) {
    var box = elem.getBoundingClientRect()

    var body = document.body
    var docElem = document.documentElement

    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft

    var clientTop = docElem.clientTop || body.clientTop || 0
    var clientLeft = docElem.clientLeft || body.clientLeft || 0

    var top  = box.top +  scrollTop - clientTop
    var left = box.left + scrollLeft - clientLeft

    return { top: Math.round(top), left: Math.round(left) }
}


function getOffset(elem) {
    if (elem.getBoundingClientRect) {
        return getOffsetRect(elem)
    } else {
        return getOffsetSum(elem)
    }
}
Sanket Patel
fonte
0

Eu cribbed isto e adicionando o 'px'; Funciona muito bem.

function getOffset(el) {
  el = el.getBoundingClientRect();
  return {
    left: (el.right + window.scrollX ) +'px',
    top: (el.top + window.scrollY ) +'px'
  }
}
to call: //Gets it to the right side
 el.style.top = getOffset(othis).top ; 
 el.style.left = getOffset(othis).left ; 
Greggo
fonte