只有當按鈕點擊完成後，才能點擊

Question

我想要一個按鈕，只有當1個框中的所有選項移動到另一個框時才能按下。接口

見截圖在這裏：

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>

Answer 2

按鈕可以被禁用，並與他們的HTML disabled屬性

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

通過訪問DOM事件和當對象被拖到你可以檢查活動項目啓用。當所有的都被移動後，改變按鈕的禁用屬性。

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

Answer 3

這裏是可能的方法之一

如果您已預定義的，你可以使用計數器提供許多選項，你應該確保相同的選項不會獲得任何點擊兩次，然後在按鈕點擊功能檢查計數器的值。

例如。 5個選擇計數器的值應爲5

如果計數器== 5

執行按鈕點擊

Answer 4

它通過使用contentChanged事件偵聽器是可能的。既然你已經在使用jQuery，這可能會有所幫助。如果右側列表中的內容發生了變化

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

該代碼檢查，如果是這樣，如果當前列表中的項目數爲4，我們正在檢查，並通過設置它的屬性disabled到false啓用按鈕。如果您不知道左側的物品數量，請預先計算並將其傳遞給回撥，同時檢查右側的物品。