javascript - 仅在完成某些操作后才可单击按钮

Question

我想要一个只有当一个框中的所有选项都移动到另一个框中时才能按下的按钮。

界面截图在这里:

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>