3

我正在尝试创建一个小程序，允许用户将设备放在一起以构建设备图片。最终产品的外观和功能如下： http: //oliverdjones.com/learning/nebulizer.swf

这是当前版本： http: //oliverdjones.com/learning/dragtester.html

我正在使用 jQuery UI。拖动事件按预期工作，但我还不能让 drop 事件触发，我完全没有想法。这是代码：

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

1 回答 1

2

This is being caused by the margin applied to the draggable node. If you remove these CSS declarations this should work as expected.

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

This is a known jQuery UI bug, see http://bugs.jqueryui.com/ticket/6876.

于 2012-05-07T02:49:55.910 回答