Jak ustawić DIV w określonych współrzędnych?

120

Chcę ustawić DIV w określonych współrzędnych? Jak mogę to zrobić używając Javascript?

Adham
źródło

Odpowiedzi:

170

Skrypt jego lefti topwłaściwości jako liczbę pikseli odpowiednio od lewej i górnej krawędzi. Muszę miećposition: absolute;

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

Lub zrób to jako funkcję, aby móc dołączyć ją do wydarzenia, takiego jak 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';
}
Michaela Berkowskiego
źródło
Pobieram współrzędne x, y po kliknięciu myszą, jak mogę wyświetlić element Div w pozycji myszy?
Adham,
@adham masz już współrzędne x, y? Po prostu zastosuj je zamiast x_pos,y_pos
Michael Berkowski
zawsze zaokrągla pozycję ... czy można ustawić pozycję taką jak 1,6 zamiast zmieniać ją na 2 lub 1.
Muhammad Umer
co jeśli mamy kordinaty, (x1, y2) (x2, y2) (x3, y3) (x4, y4)?
John dey
Robię dokładnie to samo, ale mój element div nie jest umieszczany w pobliżu kordonu myszy. Jednak przesuwa się do górnej pozycji początkowej strony głównej po nagłówku. Mam na myśli mistrza Div. Czy ktoś może mi pomóc zrozumieć, dlaczego?
JNPW
32

Nie musisz do tego używać Javascript. Używanie zwykłego starego CSS:

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

Jeśli uważasz, że musisz używać javascript lub próbujesz to zrobić dynamicznie za pomocą JQuery, ma to wpływ na wszystkie elementy div klasy „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

Alternatywnie, jeśli musisz używać zwykłego starego javascript, możesz pobrać go według identyfikatora

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
źródło
co? powinieneś użyć .class zamiast myElement oraz top & left zamiast x & y, prawda?
TMS,
Oprócz uzyskania odniesienia do elementu HTML za pomocą document.getElemtentById(), możesz również odwołać się do niego za pomocą dowolnego selektora podobnego do jQuery z document.querySelector () i jego wieloma odmianami
Shammel Lee
9

cóż, zależy to od tego, czy wszystko, czego chcesz, to ustawić element div, a potem nic więcej, nie musisz do tego używać skryptu java. Możesz to osiągnąć tylko za pomocą CSS. Liczy się to, w jakim kontenerze chcesz umieścić swój element div, jeśli chcesz go ustawić względem treści dokumentu, wtedy twój div musi być ustawiony bezwzględnie, a jego kontener nie może być umieszczony względnie lub absolutnie, w takim przypadku twój div zostanie umieszczony względem pojemnika.

W przeciwnym razie w Jquery, jeśli chcesz ustawić element względem dokumentu, możesz użyć metody offset ().

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

jeśli w stosunku do przesuniętej pozycji macierzystej, to rodzica względna lub bezwzględna. następnie użyj następujących ...

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
źródło
Świetny @Ehtesham To naprawdę mi pomogło.
RN Kushwaha
2

Możesz także użyć właściwości CSS o stałej pozycji.

<!-- 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
źródło
2

Oto dobrze opisany artykuł, a także przykładowy kod. Współrzędne JS

Zgodnie z wymaganiami. poniżej znajduje się kod, który został ostatecznie opublikowany w tym artykule. Trzeba wywołać funkcję getOffset i przekazać element html, który zwraca swoje górne i lewe wartości.

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
źródło
0

Umieściłem to i dodałem „px”; Działa bardzo dobrze.

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
źródło