Question

在下面的代码中，我只想在一个dragabble div中删除一个项目。因此我在drop事件后禁用了draggable为false。但是drop事件有时不会被触发，并且规则“只有一个元素可以在一个可拖动的中被droped”失败。

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

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

Answer 1

问题解决了...... !!但是一个解决方法..

我在另一个事件上重复了相同的代码

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

有时候不会触发jquery的drop事件

1 个答案: