jquery的drop事件有时不会被解雇

问题描述：

在下面的代码中，我只想要将一个项目放入一个可拖动的div中。因此，在放置事件之后，我已将可拖动的元素禁用为false。但是drop事件有时不会被触发，并且规则“只有一个元素被拖放到一个可拖动的元素中”失败。jquery的drop事件有时不会被解雇

我无法调试为什么drop事件有时不会触发。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Bootstrap Example</title> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<link type="text/css" rel="stylesheet" href="css/style.css"></link> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML"></script> 
</head> 
<body> 

<div class="container"> 
<div> 
<h2><strong>Drag and drop Single option</strong></h2> 
<p><?php echo $questions[0]['statement']; ?></p> 
</div> 
<?php foreach($segments as $key=>$segment){ ?> 
    <div class="row"> 
     <div class="group col-md-3"><?php echo $segment['segment_title'];?> 
     </div> 
     <div class="group col-md-7 droppable options" data-segment-id="<?php echo $segment['segment_id'];?>"></div> 
    </div> 
<?php } ?> 
<br/> 
<br/> 
<div class="row" id="all_options"> 
<div class="col-md-3"><?php foreach($options as $key=>$option){ ?> 
    <div class="options droppable all" style="position: absolute; top: 5px;right: 5px; display:block"> 
    <div class="draggable option" data-segment="<?php echo $option['segment_id'];?>"><?php echo $option['option_text']; ?></div> 
    </div><?php } ?> 
    &nbsp; 
</div> 
</div> 
<br/> 
<div class="row"> 
<div class="btn-pannel col-md-6"> 
    <button id="show_answer" class="btn btn-primary">Show Answers</button> 
    <button id="check" class="btn btn-primary" disabled>Check</button> 
    <button id="reset" class="btn btn-primary">Reset</button> 
</div> 
</div> 
</div> 
<script> 
$(function() { 

    $('.draggable, .droppable').sortable({ 
     connectWith: '.options' 
     }); 


    $('.droppable').droppable({ 
     drop: function(event, ui){ 
      $('#check').prop('disabled',false); 
      $(this).sortable('disable'); 
     } 
    }); 
}); 
</script> 
</body> 
</html>

注意从未来：cdn.mathjax.org接近其结束生命，检查HTTPS ：//www.mathjax.org/cdn-shutting-down/获取迁移提示。 –

答

问题解决了...！但有解决方法..

我重复另一事件相同的代码

$('.droppable').sortable({ 
 
     receive: function(event, ui){ 
 
      $('#check').prop('disabled',false); 
 
      $(this).sortable('disable'); 
 
     } 
 
    });

jquery的drop事件有时不会被解雇

相关推荐