Question

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

看到界面的截图在这里：

因此蓝色框中的所有选项都会在绿色框中拖动，然后按钮变为活动状态。这有可能吗？

我的代码：

$(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事件来实现此目的。请查看代码段以获得更多理解。

＆＃13;

$(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();
  });
});

＆＃13;

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

＆＃13;

Answer 2

可以使用HTML disabled属性

禁用和启用按钮

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

通过访问DOM事件和可移动项，您可以检查何时拖动对象。移动完所有内容后，请更改按钮的已禁用属性。

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

Answer 3

这里是可能的方式之一

如果你有预定数量的选项，你可以使用计数器，你应该确保没有点击相同的选项两次，然后在按钮点击功能中检查计数器值。

例如。 5选项计数器值应为5

if counter == 5

执行按钮点击

Answer 4

可以使用contentChanged事件侦听器。由于您已经使用了jQuery，这可能有所帮助。

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

此代码检查右侧列表中的内容是否已更改，如果是，我们正在检查列表项目的数量是否为4，并通过设置其属性disabled启用该按钮到false。如果您不知道左侧的项目数量，请在检查右侧的项目时预先计算并将其传递给回叫。

完成任务后，只能使按钮可点击

4 个答案: