Question

我正在尝试创建一个小程序，允许用户将各个设备放在一起构建设备的图片。最终产品的外观和功能如下：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('&nbsp;');
            }
        });


            $( '#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>

Answer 1

这是由应用于可拖动节点的margin引起的。如果你删除这些CSS声明，这应该按预期工作。

 .part1 { margin-top:15%; margin-left:57%; }

这是一个已知的jQuery UI错误，请参阅http://bugs.jqueryui.com/ticket/6876。

删除事件不在jQuery UI中触发。

1 个答案: