Forum PHP.pl > jQuery UI - droppable problem :)

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: jQuery UI - droppable problem :)

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

tycjan3000

15.05.2013, 09:36:20

Obrazek opuszczam do komórki w tabeli i jest tak tam gdzie go opuszcze, problem polega na tym że chciałbym żeby elmęt po opuszczeniu wyśrodkował się wewnątrz komórki tabeli - dopiero co wchodzę w UI i trochę już się z tym męcze , może jest ktoś kto wie jak zrobić taki myk ? prosty skrypt poniżej (nie trzeba obrazka zielony kwadr. biblio z netu)

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<style>
td { height: 150px; width:150px; background-color:pink;}
img {width: 80px;height: 80px;background-color:green;}
</style>

</head>

<body>
<img src='pilka.png'/>
<TABLE border="1" >
<TR>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
</body>
</html>
<script>
$(function() {
$( "img" ).draggable({ revert: "invalid" });
$( "td" ).droppable({
drop: function() {

// myślę że tu coś trzeba przykombinować probwoałem dodać klasę z wyrównaniem i inne cuda ale nie działa ?
}
});
});
</script>

fate

15.05.2013, 20:33:24

wklep styl
td img {margin: 0 auto;}

tycjan3000

16.05.2013, 06:34:57

prubowałem dodać to na różne sposoby do css i statycznie i dynamicznie za pomącą metody .addClass po upuszczeniu ale to nie działa pewne mechanizmy ruchu udało mi się uzyskać za pomocą metody .css w skrypcie jQ ale ciągle nie udało mi się wyśrodkować elemętu w firebug wygląda to tak : załączam screen że obrazek generuje pozycje dynamicznie w htmlu w momęcie przesunięcia obrazka a więć wydaję mi się że trzeba je wygenerować dynamicznie za pomoca jQ.

Coś czuje że czeka mnie wchłanianie dokumętacji odnośnie dropp&drapp. Ale może już ktoś macał temat ten temat

Arcioch

16.05.2013, 08:59:23

Pisane na szybko ale działa

[HTML] pobierz, plaintext 
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
 
<style>
td { height: 150px; width:150px; background-color:pink;}
.img {width: 80px;height: 80px;background-color:green;}
</style>
 
</head>
 
<body>
<div class="img"> </div>
<TABLE border="1" >
<TR>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
</body>
</html>
<script>
 
        $(function () {
 
            $(".img").draggable({
 
 
            });
 
            $("TD").droppable({
 
                drop: function (event, ui) {
 
                    $(this).append(ui.draggable);
					$(ui.draggable).css('top', 0).css('left', 0).css('margin', '0 auto');
 
                }
 
            });
 
        });
 
</script> 
 
[HTML] pobierz, plaintext

Po przeniesieniu elementu musisz go umieścić wewnątrz td

tycjan3000

16.05.2013, 09:45:08

Potwierdzam działa ! Dzięki Wielkie

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.