🚀 go-pugleaf

W dniu 2018-03-01 o 19:41, Karol pisze:
> Chcę zrobić przeciągany DIV
> Ma działać tak
> Chwytam myszą za "plywajacy_div_belka" i przeciągam
> W większym DIV jest kilka DIV id="plywajacy_div"
>
>
> Co zrobiłem
> <html>
>   <head>
>     <script >
>       down = false;
>       oldx = 0;
>       oldy = 0;
> </head>
> <body>
> Tak zdefionwany div
>
> <div id="plywajacy_div" class="plywajacy_div">
>
>   <div id="plywajacy_div_belka"  ><br><br><br></div>
>
>
>
> plywajacy_div  dddddddddddddddddddddddddddddddddddd<br>
>
> plywajacy_div<br>
>
> plywajacy_div<br>
>
> plywajacy_div<br>
>
> plywajacy_div<br>
>
> </div>
>
>
>
> <script>
> var moveDiv = document.getElementById('plywajacy_div');
> $("#plywajacy_div").css("background", "red");
> $("#plywajacy_div_belka").css("background", "green");
> $('#plywajacy_div_belka').on("mousemove", function(e) {
>
>   if(down) {
>     var x = e.pageX;// - moveDiv.offsetLeft;
>     var y = e.pageY;// - moveDiv.offsetTop;
>       moveDiv.style.left = (x-15) + 'px';
>       moveDiv.style.top = (y-15) + 'px';
>     }
> });
> $("#plywajacy_div_belka").mousedown(function() {
>     $('#plywajacy_div').css('position', 'fixed');
>    //$('#plywajacy_div').css('position', 'relative');
>
>
>
>            down = true;
>        }).mouseup(function() {
>            down = false;
>        }).mouseout(function() {
>            down = false;
>        });
>
>  </script>
> </body
>
> Niestety działa to tylko przy
> $('#plywajacy_div').css('position', 'fixed');
> pytanie jak to zrobić przy
> $('#plywajacy_div').css('position', 'relative');?
>
> Drugie pytanie jak pobrać pozycję kursora w DIV które jest przeciągane?
>
>
jeszcze jedno jak zablokować obszar przeciągania do obszaru rodzica?

W dniu 2018-03-01 o 19:41, Karol pisze:
> Chcę zrobić przeciągany DIV


Z tego, co widzę, w jquery przydajesz obiektowi ruchomość prostym:

$(function() {
$( "#mojobiekt" ).draggable();
});

Bez konieczności tworzenia własnej obsługi przeciągania.
Zabawa z parametrami wskazuje, że działa też dla
position:relative;

https://jqueryui.com/draggable/
https://codepen.io/lrelia/pen/bEyLB


> Drugie pytanie jak pobrać pozycję kursora w DIV które jest przeciągane?

Odczytać:
clientX clientY
offsetTop offsetLeft
i sobie odjąć?

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_mouse_clientxy

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_prop_element_offsettop


-- 
Freja Draco

Kiedy smok jest w pobliżu, nic nie będzie w stanie ci pomóc,
jeśli nie uwzględnisz go w swoich kalkulacjach.

W dniu 02-03-2018 o 02:38, Freja Draco pisze:
> W dniu 2018-03-01 o 19:41, Karol pisze:
>> Chcę zrobić przeciągany DIV
> 
> 
> Z tego, co widzę, w jquery przydajesz obiektowi ruchomość prostym:
> 
> $(function() {
> $( "#mojobiekt" ).draggable();

Ale to nie ma być Przeciągnij i Upuść
tylko "pływające okienko" Chodzi o to żeby użytkownik sam sobie ustawił 
układ "okien" następnie strona ma zapisać układ.

> Odczytać:
> clientX clientY
> offsetTop offsetLeft
> i sobie odjąć?
Pozycje myszy
clientX/Y jest względem bieżącego okna(widoku)
offsetTop jest względem rodzica (Top względem rodzica - Top div względem 
div wyżej położonego w hierarchii)
Więc co mam sobie odjąć jeżeli Ja potrzebuję pozycji myszy w najniższym DIV?

> Drugie pytanie jak pobrać pozycję kursora w DIV które jest przeciągane?

Policz sobie z getBoundingClientRect danego obiektu i z koordynat myszy 
w zdarzeniu drop, czy jakim tam potrzebujesz.

-- 
Pozdrawiam,
Marek

W dniu 2018-03-02 o 14:19, konsul41@wp.pl pisze:
>
>> Odczytać: clientX clientY offsetTop offsetLeft i sobie odjąć?
> Pozycje myszy

> clientX/Y jest względem bieżącego okna(widoku) offsetTop jest
> względem rodzica (Top względem rodzica - Top div względem div wyżej
> położonego w hierarchii) Więc co mam sobie odjąć jeżeli Ja potrzebuję
> pozycji myszy w najniższym DIV?

Racja, no to:

   e=document.getElementById(twoj_id);
   el = e.getBoundingClientRect();
   gora = el.top + window.scrollY;

i dostajesz pozycję górnej krawędzi elementu względem początku dokumentu.

Analogicznie możesz skorygować clientY o aktualne przewinięcie ekranu
i dostać współrzędne kliknięcia względem początku dokumentu.

-- 
Freja Draco

Kiedy smok jest w pobliżu, nic nie będzie w stanie ci pomóc,
jeśli nie uwzględnisz go w swoich kalkulacjach.

W dniu 2018-03-02 o 08:00, konsul41@wp.pl pisze:
> W dniu 02-03-2018 o 02:38, Freja Draco pisze:
>> W dniu 2018-03-01 o 19:41, Karol pisze:
>>> Chcę zrobić przeciągany DIV
>>
>>
>> Z tego, co widzę, w jquery przydajesz obiektowi ruchomość prostym:
>>
>> $(function() { $( "#mojobiekt" ).draggable();
>
> Ale to nie ma być Przeciągnij i Upuść tylko "pływające okienko"
> Chodzi o to żeby użytkownik sam sobie ustawił układ "okien" następnie
> strona ma zapisać układ.

A to przepraszam. Widać nie należy odpisywać po nocach ;)

-- 
Freja Draco

Kiedy smok jest w pobliżu, nic nie będzie w stanie ci pomóc,
jeśli nie uwzględnisz go w swoich kalkulacjach.