我想要一个只能在将一个框的所有选项移到另一个框时才能按下的按钮。

看到界面的截图在这里:

interface

因此将蓝色框中的所有选项都拖动到绿色框中,然后该按钮变为 Activity 状态。这可能吗?

我的代码:

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


我怎样才能做到这一点 ?

最佳答案

您可以使用.sort事件进行排序。请检查代码段以了解更多信息。

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

关于javascript - 仅在完成某件事后才使按钮可点击,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39699272/

10-12 12:55
查看更多