Forum PHP.pl > [JQuery]Drag-and-dropp

Pomoc - Szukaj - Użytkownicy - Kalendarz

e-konrad

12.02.2016, 19:38:05

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 
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style type="text/css">
    #GridDiv {
    width: 200px;
    height: 200px;
    background-color: #F00;
}
 
#Component1 {
    width: 200px;
    height: 25px;
    background-color: #0FF;
}
#Component2 {
    width: 200px;
    height: 25px;
    background-color: green;
}
  </style>
 
<script type='text/javascript'>//<![CDATA[
$(function(){
$( "#Component1" ).draggable();
$( "#Component2" ).draggable();
 
$( "#GridDiv" ).droppable({
    accept: "#Component1, #Component2",
    drop: function( event, ui ) {
       var droppable = $(this);
       var draggable = ui.draggable;
       // Move draggable into droppable
       draggable.appendTo(droppable);
       draggable.css({top: '0px', left: '0px'});
    }
});
});//]]> 
</script>  
</head>
 
<body>
 
<div id="GridDiv"></div>
<div id="Component1">obiekt1</div>
<div id="Component2">obiekt2</div>
 
</body>
</html>
 
[HTML] pobierz, plaintext

koodo218

12.02.2016, 20:04:16

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.

e-konrad

12.02.2016, 21:49:37

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

koodo218

13.02.2016, 09:04:29

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

[JAVASCRIPT] pobierz, plaintext 
//<![CDATA[
$(function(){
 
$('.components').draggable();
 
$( "#GridDiv" ).droppable({
    accept: ".components",
    drop: function( event, ui ) {
       var droppable = $(this);
       var draggable = ui.draggable;
       // Move draggable into droppable
       draggable.appendTo(droppable);
       draggable.css({top: '0px', left: '0px'});
    }
});
});//]]> 
[JAVASCRIPT] pobierz, plaintext

[CSS] pobierz, plaintext 
#GridDiv {
    width: 200px;
    height: 200px;
    background-color: #F00;
}
.components {
    width: 200px;
    height: 25px;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}
[CSS] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.