2016-07-22 38 views
0

在下面的代碼中,我只想要將一個項目放入一個可拖動的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> 
+0

注意從未來:cdn.mathjax.org接近其結束生命,檢查HTTPS ://www.mathjax.org/cdn-shutting-down/獲取遷移提示。 –

回答

0

問題解決了...!但有解決方法..

我重複另一事件相同的代碼

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