Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > pl.comp.lang.php > #15763 > unrolled thread

Przeciągany div

Back to article view | Back to pl.comp.lang.php

Contents

  Przeciągany div Karol <konsul41@wp.pl> - 2018-03-01 19:41 +0100
    Re: Przeciągany div Karol <konsul41@wp.pl> - 2018-03-01 19:45 +0100
    Re: Przeciągany div Freja Draco <frreja@poczta.fm> - 2018-03-02 02:38 +0100
      Re: Przeciągany div "konsul41@wp.pl" <konsul41@wp.pl> - 2018-03-02 08:00 +0100
        Re: Przeciągany div Freja Draco <frreja@poczta.fm> - 2018-03-02 17:22 +0100
      Re: Przeciągany div "konsul41@wp.pl" <konsul41@wp.pl> - 2018-03-02 14:19 +0100
        Re: Przeciągany div Freja Draco <frreja@poczta.fm> - 2018-03-02 17:21 +0100
    Re: Przeciągany div Marek S <precz@spamowi.com> - 2018-03-02 17:00 +0100

#15763 — Przeciągany div

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?

[toc] | [next] | [standalone]

#15764

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?

[toc] | [prev] | [next] | [standalone]

#15765

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.

[toc] | [prev] | [next] | [standalone]

#15766

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.

[toc] | [prev] | [next] | [standalone]

#15770

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.

[toc] | [prev] | [next] | [standalone]

#15767

> 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?

[toc] | [prev] | [next] | [standalone]

#15769

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.

[toc] | [prev] | [next] | [standalone]

#15768

> 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

[toc] | [prev] | [standalone]

Back to top | Article view | pl.comp.lang.php

csiph-web