何かが行われたときにボタンをクリックするだけです

Question

1つのボックスからすべてのオプションをもう一方のボックスに移動したときにのみ押すことができるボタンが必要です。

インターフェースのスクリーンショットを参照してください現在地：

interface

ので、青色のボックスからのすべてのオプションは、緑色のボックスにドラッグされた後、ボタンがアクティブになります。これは可能ですか？

私のコード：

$(document).ready(function(){ 
 
    $('.next').click(function() { 
 
    $('.current').removeClass('current').hide() 
 
    .next().show().addClass('current'); 
 
    if ($('.current').hasClass('last')) { 
 
     $('#next').attr('disabled', true); 
 
    } 
 
    $('#prev').attr('disabled', null); 
 
    }); 
 
}); 
 

 

 
$(document).ready(function(){ 
 
    $(function() { 
 
    $("#sortable1, #sortable2").sortable({ 
 
     connectWith: ".connectedSortable, .connectedSortable1" 
 
    }).disableSelection(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/> 
 

 
<div id='div2' class='dropboxes'> 
 
    <!--box with options to drag to the other box--> 
 
    <ul id="sortable1" class="connectedSortable"> 
 
    <li class="ui-state-default" style="cursor:move;" id='I'>option1</li> 
 
    <li class="ui-state-default" style="cursor:move;" id='D'>option2</li> 
 
    <li class="ui-state-default" style="cursor:move;" id='C'>option3</li> 
 
    <li class="ui-state-default" style="cursor:move;" id='S'>option4</li> 
 
    </ul> 
 

 
    <!--other box where the options above can be dropped--> 
 
    <ul id="sortable2" class="connectedSortable1"> 
 
    </ul> 
 
    
 
    <!--this button has to be only clickable when all the options are dragged to the other box--> 
 
    <button class="next">Volgende</button> 
 
</div>

私はこれをどのように行うことができますか？

Answer 1

これは、sortableの.dropイベントを使用して実現できます。詳細はスニペットで確認してください。

$(document).ready(function(){ 
 
    $('.next').click(function() { 
 
    $('.current').removeClass('current').hide() 
 
    .next().show().addClass('current'); 
 
    if ($('.current').hasClass('last')) { 
 
     $('#next').attr('disabled', true); 
 
    } 
 
    $('#prev').attr('disabled', null); 
 
    }); 
 
}); 
 

 

 
$(document).ready(function(){ 
 
    $(function() { 
 
    $("#sortable1, #sortable2").sortable({ 
 
     connectWith: ".connectedSortable, .connectedSortable1", 
 
     stop: function() { 
 
     if($("#sortable1 li").length > 0){ 
 
      $(".next").prop("disabled",true); 
 
     }else{ 
 
      $(".next").prop("disabled",false); 
 
     } 
 
     } 
 
    }).disableSelection(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/> 
 

 
<div id='div2' class='dropboxes'> 
 
    <!--box with options to drag to the other box--> 
 
    <ul id="sortable1" class="connectedSortable"> 
 
    <li class="ui-state-default" style="cursor:move;" id='I'>option1</li> 
 
    <li class="ui-state-default" style="cursor:move;" id='D'>option2</li> 
 
    <li class="ui-state-default" style="cursor:move;" id='C'>option3</li> 
 
    <li class="ui-state-default" style="cursor:move;" id='S'>option4</li> 
 
    </ul> 
 

 
    <!--other box where the options above can be dropped--> 
 
    <ul id="sortable2" class="connectedSortable1"> 
 
    Drag Here 
 
    </ul> 
 
    
 
    <!--this button has to be only clickable when all the options are dragged to the other box--> 
 
    <button disabled="disabled" class="next">Volgende</button> 
 
</div>

Answer 2

ボタンは無効とそのHTML DOMイベントとオブジェクトは、ドラッグしているときに確認することができ、移動可能項目へのアクセス権を持つdisabled属性

<button id="nextBtn" disabled="true">Disabled</button> 

を有効にすることができます。すべてが移動されたら、ボタンの無効な属性を変更します。あなたはカウンターを使用できるオプションの数は、あなたが必ず同じオプションを二回クリックし、ボタンにならないことを確認する必要があり提供事前に定義されている場合

document.getElementById('nextBtn').disabled = false; 

Answer 3

ここだが可能な方法

の一つでありますクリック機能でカウンタの値を確認します。

例えば、カウンタ== 5

がボタンを実行した場合5つのオプションのカウンタ値は

Answer 4

それはcontentChangedイベントリスナーを使用することにより可能ですクリック5

でなければなりません。既にjQueryを使用しているので、これは役に立ちます。

$('#sortable2').on('contentChanged', function(){ 
    if($(this).children().length == 4) 
     $('.next').attr('disabled', false); 
}); 

現在のリスト項目の数は4であり、それがfalseに属性disabledだ設定することで、ボタンを有効にする場合は右側のリストの内容が変更されているそうであれば、我々はチェックしている場合は、このコードがチェックされます。左側のアイテムの数がわからない場合は、右側のアイテムをチェックしながらコールバックに計算して渡してください。