Πρόβλημα με append/appendTo και Sortable

Gio123 · 21 Ιανουαρίου 2015

Καλημέρα,

Έχω τις παρακάτω εντολές

$("#sortable").append( "<li class='default' id='Item_" +(iCnt) + "'style='cursor:pointer'></li>" );
document.getElementById("item"+(iCnt)).style.display = "block";
$("#item"+(iCnt)).appendTo("#Item_"+(iCnt)).hide().fadeIn(500);

οι οποίες δουλεύουν μία χαρά. Έχω 4 <div> τα οποία είναι style="display:none;" και τα χρησιμοποιώ βάζοντας σε κάθε ένα <li> με τις παραπάνω εντολές. Το πρόβλημα μου είναι ότι όταν θέλω να κάνω sortable της λίστα και "πιάνω" ένα <li> για να του αλλάξω σειρά τότε το <div> διαχωρίζεται από το <li>. Δηλαδή μετακινούνται τα <div> ανεξάρτητα από τα <li>. Καμία ιδέα για το πως μπορώ να το φτιάξω;

Να και ο κώδικας με το sortable

$(function() {
  $('#sortable').sortable({
    axis: 'y',
    
    update:function(event,ui){
        var postData = $(this).sortable('serialize');
        console.log(postData);
        $.post('save.php',{list:postData},function(o) {
         
        },'json');
      }
  });

});

Ευχαριστώ.

alou · 21 Ιανουαρίου 2015

Νομίζω πρέπει να κάνεις ένα παράδειγμα με full html / js ιδανικά σε jsfiddle / codepen κλπ για να καταλάβει κάποιος και να σε βοηθήσει.

nucleus · 21 Ιανουαρίου 2015

Σε εμένα παίζει κανονικά πάντως με το παρακάτω

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 0.9; height: 18px; }
#sortable li div { position: absolute; ; }
</style>
<script>
$(function() {

var iCnt = 1;
while(iCnt <= 4) {
$("#sortable").append( "<li class='ui-state-default' id='Item_" +(iCnt) + "'style='cursor:pointer'></li>" );
document.getElementById("item"+(iCnt)).style.display = "inline";
$("#item"+(iCnt)).appendTo("#Item_"+(iCnt)).hide().fadeIn(500);
iCnt += 1;
}


$('#sortable').sortable({
    axis: 'y',
    
    update:function(event,ui){
        var postData = $(this).sortable('serialize');
        console.log(postData);
      }
  });
});
</script>
</head>
<body>
<ul id="sortable">

</ul>
<div id="item1" style="display:none;"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item1</div>
<div id="item2" style="display:none;"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item2</div>
<div id="item3" style="display:none;"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item3</div>
<div id="item4" style="display:none;"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item4</div>
</body>
</html>

Αυτά που είναι sortable είναι τα li που έχεις με id Item_1,Item_2,Item_3,Item_4.

Επίσης νομίζω ότι έχεις καταλάβει λάθος τι ακριβώς κάνει η serialize στο sortable. Είναι διαφορετική από το serialize σε μια form.

http://api.jqueryui.com/sortable/#method-serialize

Στην περίπτωση σου βγάζει το παρακάτω

"Item[]=1&Item[]=3&Item[]=2&Item[]=4"

Το παραπάνω σημαίνει :

H σειρά των li στον άξονα y είναι : Item_1,Item_3,Item_2,Item_4.

Gio123 · 21 Ιανουαρίου 2015

Όντως έτσι είναι. Στην αρχή μόλις το πρωτό έφτιαχνα το είχα όπως το έχεις αλλά μετά για κάποιο λόγο το άλλαξα, είναι η πρώτη φορά που ασχολούμαι με αυτά και προσπαθώ για το καλύτερο.

Σε ευχαριστώ πάντως.

Σύνδεση

Πρόβλημα με append/appendTo και Sortable

Προτεινόμενες αναρτήσεις

Gio123

alou

nucleus

Gio123

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση