JQuery UIで並べ替えを無効にする方法は？

私はDjangoプロジェクトのリスト項目をソートするのにJQuery UIを使用します。それはうまく動作しますが、リスト内で1つのアイテムだけがソート可能です。ユーザーはその1つの項目をドラッグアンドドロップできます。リスト（#slides）に1つの項目しかない場合、ソートを無効にする方法は？JQuery UIで並べ替えを無効にする方法は？

JS：sortableの

$(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"); 
    }); 
});

出典

2017-09-06 Nurzhan Nogerbek

使用disabledプロパティ。

$("#slides li")に無効なソートよりも1つだけある場合は、liです。

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

あなたは

$('#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>

出典

2017-09-06 06:18:54

あなたのコードでは、いくつかの問題で動作します。私はリストに1つのアイテムがあり、次に新しいアイテムを追加すると、それらはどちらもソートできなくなったと言います。私はリフレッシュリストが必要だと思います。どうやって作るのか考えていますか？私のポストをもう一度チェックしてください。私は小さなコードでそれを更新します。 '$（"＃slides "）。sortable（" refresh "）;' dont work。 –

@NurzhanNogerbekは更新された回答を確認します。リフレッシュ後のリセット '無効'オプション –

ここをクリックしてイベントをクリックしてください。そのスクリプトの後にのみ動作します。私はタッチイベントを試みたが、その仕事をしない。 on（ 'touchstart'、function（）{***}）;ユーザがリスト項目をタッチしたときにリフレッシュリストが必要です。他のアイデアはありますか？ –

以下の更新プロパティを使用する場合は、list#slides長さを取得し、唯一つの項目

listitem.addClass('unsortable');

かのことができますないと

とソート可能な使用でそのクラス：

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

    });

出典

2017-09-06 06:20:55

JQuery UIで並べ替えを無効にする方法は？

答えて

関連する問題