有时不会触发jquery的drop事件
有时不会触发jquery的drop事件
提问于 2016-07-22 14:33:24
在下面的代码中，我只希望在一个可拖放的div中放入一个项目。因此，我在drop事件之后禁用了draggable to false。但是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 } ?>
</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>回答 1
Stack Overflow用户
发布于 2016-07-23 03:05:46
问题解决了...！！而是一种变通办法..
我在另一个事件上重复了相同的代码
$('.droppable').sortable({
receive: function(event, ui){
$('#check').prop('disabled',false);
$(this).sortable('disable');
}
});
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38519687
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号