Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JQuery]Drag-and-dropp
e-konrad
post
Post #1





Grupa: Zarejestrowani
Postów: 49
Pomógł: 0
Dołączył: 11.12.2008

Ostrzeżenie: (0%)
-----

Witam wszystkich
staram się napisać funkcjonalność w której jeden div jest kontenerem na którym upuszczam div (Component) które znajdują się poza kontenerem. Samo przeciąganie i upuszczanie nie stanowi problemu tylko co w przypadku gdy muszę zdefiniować dużo divów Component? Drugie pytanie, w jaki sposób po upuszczeniu diva Component na div kontener mogę wyświetlić np. alertem tekst który znajduje się w divie upuszczanym?

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
  4. <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  5. <style type="text/css">
  6.     #GridDiv {
  7.     width: 200px;
  8.     height: 200px;
  9.     background-color: #F00;
  10. }
  11.  
  12. #Component1 {
  13.     width: 200px;
  14.     height: 25px;
  15.     background-color: #0FF;
  16. }
  17. #Component2 {
  18.     width: 200px;
  19.     height: 25px;
  20.     background-color: green;
  21. }
  22.   </style>
  23.  
  24. <script type='text/javascript'>//<![CDATA[
  25. $(function(){
  26. $( "#Component1" ).draggable();
  27. $( "#Component2" ).draggable();
  28.  
  29. $( "#GridDiv" ).droppable({
  30.     accept: "#Component1, #Component2",
  31.     drop: function( event, ui ) {
  32.        var droppable = $(this);
  33.        var draggable = ui.draggable;
  34.        // Move draggable into droppable
  35.        draggable.appendTo(droppable);
  36.        draggable.css({top: '0px', left: '0px'});
  37.     }
  38. });
  39. });//]]> 
  40. </script>  
  41. </head>
  42.  
  43. <body>
  44.  
  45. <div id="GridDiv"></div>
  46. <div id="Component1">obiekt1</div>
  47. <div id="Component2">obiekt2</div>
  48.  
  49. </body>
  50. </html>
  51.  
[HTML] pobierz, plaintext


Go to the top of the page
+Quote Post
koodo218
post
Post #2





Grupa: Zarejestrowani
Postów: 114
Pomógł: 25
Dołączył: 22.11.2015

Ostrzeżenie: (0%)
-----

Cytat(e-konrad @ 12.02.2016, 19:38:05 ) *
co w przypadku gdy muszę zdefiniować dużo divów Component?

Zastosuj klasy i przypisz każdemu zdarzenie w pętli.
Cytat(e-konrad @ 12.02.2016, 19:38:05 ) *
Drugie pytanie, w jaki sposób po upuszczeniu diva Component na div kontener mogę wyświetlić np. alertem tekst który znajduje się w divie upuszczanym?

W chwili wzięcia diva pobierasz jego napis do zmiennej (this.innerHTML, this.value zależy jak masz to rozwiązane)... w chwili upuszczenia uruchamiasz alert ze zmienną pobraną wcześniej.
Go to the top of the page
+Quote Post
e-konrad
post
Post #3





Grupa: Zarejestrowani
Postów: 49
Pomógł: 0
Dołączył: 11.12.2008

Ostrzeżenie: (0%)
-----

Mógłbyś pokazać mi jak zrobić tą pętlę w skrypcie javy? Próbuję na różne sposoby i za każdym razem nie ma możliwości aby ruszyć div
Go to the top of the page
+Quote Post
koodo218
post
Post #4





Grupa: Zarejestrowani
Postów: 114
Pomógł: 25
Dołączył: 22.11.2015

Ostrzeżenie: (0%)
----- 

[HTML] pobierz, plaintext 
  1. <div id="GridDiv"></div>
  2. <div class="components green">obiekt1</div>
  3. <div class="components blue">obiekt2</div>
[HTML] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
  1. //<![CDATA[
  2. $(function(){
  3.  
  4. $('.components').draggable();
  5.  
  6. $( "#GridDiv" ).droppable({
  7.     accept: ".components",
  8.     drop: function( event, ui ) {
  9.        var droppable = $(this);
  10.        var draggable = ui.draggable;
  11.        // Move draggable into droppable
  12.        draggable.appendTo(droppable);
  13.        draggable.css({top: '0px', left: '0px'});
  14.     }
  15. });
  16. });//]]> 
[JAVASCRIPT] pobierz, plaintext 


[CSS] pobierz, plaintext 
  1. #GridDiv {
  2.     width: 200px;
  3.     height: 200px;
  4.     background-color: #F00;
  5. }
  6. .components {
  7.     width: 200px;
  8.     height: 25px;
  9. }
  10. .green {
  11.   background-color: green;
  12. }
  13. .blue {
  14.   background-color: blue;
  15. }
[CSS] pobierz, plaintext
Go to the top of the page
+Quote Post
« Następny starszy · XML, AJAX · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 15.10.2025 - 02:37
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn