我正在尝试创建一个小程序，允许用户将设备的各个部分放在一起以构 build 备的图片。最终产品的外观和功能如下:http://oliverdjones.com/learning/nebulizer.swf
这是当前版本:http://oliverdjones.com/learning/dragtester.html
我正在使用 jQuery UI。拖动事件按预期工作，但我还无法触发放置事件，我完全没有想法。代码如下:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>drag test</title>
<style>
.content {width:100%; height:100%;position: absolute;}
#draggable img {width:100%}
.part1 {position:absolute;width:100px; z-index: 5; margin-top:15%; margin-left:57%;}
.drop1 {position:absolute;width:100px; height: 70px; z-index: 3; background-color:rgba(255,0,0,0.5);top:42%; left:45%; }
.dropped1 {position:absolute;width:100px; height: 70px; z-index: 3; background-color:rgba(255,255,255,0.5);top:42%; left:45%;}
.base {position:absolute; width: 17%; top:45%; left:42%;z-index: 2}
.status {position:absolute; width: 160px; border:#000 solid 2px; text-align:center; -webkit-border-radius: 12px; border-radius: 12px; color:#000; font-family: Arial, Helvetica, sans-serif; top:85%; left:30%; z-index:3}
</style>
<script src="js/jqueryui/js/jquery-1.7.2.min.js"></script>
<script src="js/jqueryui/js/jquery-ui-1.8.20.custom.min.js"></script>
<script src="js/jqueryui/js/jquery.ui.touch-punch.min.js"></script>
<script>
$(function() {
$( '#draggable' ).draggable({
containment: '#content',
drag: function(event, ui){
$('.status')
.addClass('ui-state-highlight')
.find('p')
.html(' ');
}
});
$( '#droppable' ).droppable({
accept: '#draggable',
drop: function( event, ui ) {
$.this.css({'background':'white'});
$('.status')
.addClass('ui-state-highlight')
.find('p')
.html('Good!');
}
});
});
</script>
</head>
<body>
<div class="content">
<img class="base"src="images/base.png" />
<div id="draggable" class="ui-widget-content part1">
<img src="images/part1.png" />
</div>
<div id="droppable" class="ui-widget-header drop1">
<div></div>
</div>
<div. class="status">
<p>Please Assemble</p>
</div>
</div><!-- /content -->
</body>
最佳答案
这是由应用于可拖动节点的边距引起的。如果删除这些 CSS 声明，这应该可以按预期工作。
.part1 { margin-top:15%; margin-left:57%; }
这是一个已知的 jQuery UI 错误，请参阅 http://bugs.jqueryui.com/ticket/6876 .
关于jquery - Drop 事件未在 jQuery UI 中触发。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10474327/