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

您可以使用可排序的 .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>