Rzeczą którą chciałbym poprawić/dorobić jest akcja po ustawieniu listy (chodzi tutaj o to, żeby jak już wszystko będzie na swoim miejscu to żeby można było zapisać tą kolejność do bazy danych, czy wyświetlić echem).
Jednocześnie chciałbym się spytać, czy macie jakąś radę, jak to potem odczytać i w tej samej kolejności te pola poustawiać?
Po drugie mam pytanie do dokumentacji tej funkcji (http://jqueryui.com/demos/sortable/#placeholder). Jest tam wiele opcji, i jakoś żadnej nie mogę dodać do swojego kodu. Weźmy na przykład opcję cursor:
Cytat
Defines the cursor that is being shown while sorting.
Code examples
Initialize a sortable with the cursor option specified.
$( ".selector" ).sortable({ cursor: 'crosshair' });
Get or set the cursor option, after init.
//getter
var cursor = $( ".selector" ).sortable( "option", "cursor" );
//setter
$( ".selector" ).sortable( "option", "cursor", 'crosshair' );
Code examples
Initialize a sortable with the cursor option specified.
$( ".selector" ).sortable({ cursor: 'crosshair' });
Get or set the cursor option, after init.
//getter
var cursor = $( ".selector" ).sortable( "option", "cursor" );
//setter
$( ".selector" ).sortable( "option", "cursor", 'crosshair' );
Mój kod jest następujący:
Kod
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; display:block; float:left; width:760px; }
#sortable li { margin: 0 5px 3px 0; padding: 2px; height: 232px; float:left; width:240px; }
html>body #sortable li { height: 232px; line-height: 1.2em; float:left; }
.ui-state-highlight { height: 232px; line-height: 1.2em; display:block; float:left; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable({
placeholder: "ui-state-highlight"
});
$( "#sortable" ).disableSelection();
});
$( "#sortable" ).sortable({ cursor: 'crosshair' });
</script>
<div class="demo">
<ul id="sortable">
<li class="ui-state-default"><img src="images/galeria.jpg" /></li>
<li class="ui-state-default"><img src="images/galeria.jpg" /></li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
<li class="ui-state-default">Item 6</li>
<li class="ui-state-default">Item 7</li>
</ul>
</div>
#sortable { list-style-type: none; margin: 0; padding: 0; display:block; float:left; width:760px; }
#sortable li { margin: 0 5px 3px 0; padding: 2px; height: 232px; float:left; width:240px; }
html>body #sortable li { height: 232px; line-height: 1.2em; float:left; }
.ui-state-highlight { height: 232px; line-height: 1.2em; display:block; float:left; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable({
placeholder: "ui-state-highlight"
});
$( "#sortable" ).disableSelection();
});
$( "#sortable" ).sortable({ cursor: 'crosshair' });
</script>
<div class="demo">
<ul id="sortable">
<li class="ui-state-default"><img src="images/galeria.jpg" /></li>
<li class="ui-state-default"><img src="images/galeria.jpg" /></li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
<li class="ui-state-default">Item 6</li>
<li class="ui-state-default">Item 7</li>
</ul>
</div>
i wpisany tutaj croshair nic nie daje, podobnie jak opacity czy cokolwiek innego. Domyślam się, że dla wielu osób to są pytania niemalże śmieszne, ale wybaczcie, ja nie znam tego języka a jak już mówiłem też nie wiem jakiej wiedzy na jego temat nie potrzebuje, żeby jedną funkcjonalność zastosować.