Wie kann die Sortierung in JQuery UI deaktiviert werden?

Ich verwende JQuery UI zum Sortieren von Listenelementen in meinem Django-Projekt. Es funktioniert gut, aber wenn in der Liste nur ein Artikel, stehlen sortierbar. Der Benutzer kann das eine Element ziehen und ablegen. Wie kann die Sortierung deaktiviert werden, wenn nur ein Element in der Liste (#slides) vorhanden ist?Wie kann die Sortierung in JQuery UI deaktiviert werden?

JS:

$(function() { 
    $("#slides").sortable({ 
     start: function (event, ui) { 
      ui.placeholder.height(ui.item.height()); 
     }, 
     stop: function(event, ui) { 
      slide_order = {}; 

      $("#slides").children().each(function(){ 
       slide_order[$(this).data('id')] = $(this).index(); 
      }); 

      $.ajax({ 
       url: "sorting/", 
       type: "post", 
       contentType: 'application/json; charset= utf-8', 
       dataType: 'json', 
       data: JSON.stringify(slide_order) 
      }); 
     }, 
    }); 

    $('#slides .list-group-item').click(function() { 
     $("#slides").sortable("refresh"); 
    }); 
});

Quelle

2017-09-06 Nurzhan Nogerbek

Verwenden disabled Eigenschaft sortable.

Wenn $("#slides li") nur eine li als deaktivierte Sortierung hat.

$("#slides").sortable({ 
    disabled: $("#slides li").length == 1 
});

Wenn Sie aktualisierte Eigenschaft verwenden möchten, unter

$('#slides .list-group-item').click(function() { 
    $("#slides").sortable("refresh"); 
    $("#slides").sortable("option", "disabled", $("#slides li").length == 1); 
});

<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>jQuery UI Sortable - Default functionality</title> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
 
    <style> 
 
    #slides { 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 0; 
 
     width: 60%; 
 
    } 
 
    
 
    #slides li { 
 
     margin: 0 3px 3px 3px; 
 
     padding: 0.4em; 
 
     padding-left: 1.5em; 
 
     font-size: 1.4em; 
 
     height: 18px; 
 
    } 
 
    
 
    #slides li span { 
 
     position: absolute; 
 
     margin-left: -1.3em; 
 
    } 
 
    </style> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    <script> 
 
    $(function() { 
 

 
     $("#slides").sortable({ 
 
     disabled: $("#slides li").length == 1 
 
     }); 
 

 
     $('#slides').on('click', function() { 
 
     $("#slides").sortable("refresh"); 
 
     $("#slides").sortable("option", "disabled", $("#slides li").length == 1); 
 
     }); 
 

 
    }); 
 
    </script> 
 
</head> 
 

 
<body> 
 

 
    <ul id="slides"> 
 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s list-group-item"></span>Item 1</li> 
 

 
    </ul> 
 

 
    <button>add</button> 
 
</body> 
 

 
</html>

Quelle

2017-09-06 06:18:54

Ihr Code funktioniert mit einigen Problemen. Nehmen wir an, ich habe einen Gegenstand in der Liste und füge dann einen neuen Gegenstand hinzu, beide wurden unortbar. Ich brauche Liste aktualisieren, denke ich. Hast du Ideen, wie du es machen kannst? Überprüfen Sie meinen Beitrag erneut bitte. Ich aktualisiere es mit wenig Code. '$ (" # slides ") .sortierbar (" refresh ");' funktioniert nicht. –

@NurzhanNogerbek Überprüfen Sie die aktualisierte Antwort. Nach dem Refresh Reset 'disabled' Option –

click event hier ist nicht korrekt Ursache Benutzer beim Start brauchen Doppelklick auf Element. Erst danach funktioniert das Skript. Ich habe Touch Event versucht, aber es funktioniert nicht. '$ ('# slides'). on ('touchstart', function() {***});' Wir brauchen eine Aktualisierungsliste, wenn ein Element der Benutzerberührungsliste angezeigt wird. Hast du noch andere Ideen? –

Sie können list#slides Länge erhalten und wenn nur ein Element

listitem.addClass('unsortable');

und in sortierbar Verwendung dieser Klasse mit nicht:

$("#slides").sortable({ 
    items: "listitem:not(.unsortable)", 
    // Your other code -------- 

    });

Quelle

2017-09-06 06:20:55

Wie kann die Sortierung in JQuery UI deaktiviert werden?

Antwort

Verwandte Themen