Knopf nur anklickbar machen, wenn etwas fertig ist

Question

Ich möchte eine Taste drücken, die nur gedrückt werden kann, wenn alle Optionen von 1 Box in die andere Box verschoben werden.

siehe Screenshot der Schnittstelle sind hier:

interface

so alle Optionen von der blauen Box in der grünen Box gezogen und dann wird der Button aktiv. Ist das möglich?

mein Code:

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

Wie kann ich das tun?

Answer 1

Sie können dies erreichen mit .drop Ereignis von sortierbar. Bitte überprüfen Sie das Snippet für mehr Verständnis.

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

Buttons können mit ihren HTML disabled Attribut

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

Mit dem Zugriff auf DOM-Ereignisse und die beweglichen Elemente deaktiviert und aktiviert werden, können Sie überprüfen, wenn Objekte über gezogen werden. Wenn alle verschoben wurden, ändern Sie das deaktivierte Attribut der Schaltfläche.

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

Answer 3

Hier ist eine der Art und Weise,

Wenn Sie Reihe von Optionen vordefiniert Sie Zähler bereitgestellt verwenden könnten Sie sollten sicherstellen, dass die gleiche Option zweimal bekommt nicht angeklickt und dann in der Schaltfläche Klicken Sie auf Funktion, um den Zählerwert zu prüfen.

z. 5 Optionen Zählerwert sollte 5

, wenn Zähler == 5

Schaltfläche ausführen klicken

Answer 4

Es ist möglich, indem die contentChanged Ereignis-Listener verwenden. Da Sie jQuery bereits verwenden, könnte dies hilfreich sein.

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

Dieser Code wird überprüft, ob der Inhalt auf der rechten Liste geändert hat und wenn ja, prüfen wir, ob die Anzahl der Listenelemente vorhanden 4 und ermöglicht die Schaltfläche, indem es Attribut ist disabled-false. Wenn Sie die Anzahl der Elemente auf der linken Seite nicht kennen, berechnen Sie sie und übergeben Sie sie an den Rückruf, während Sie die Elemente auf der rechten Seite überprüfen.