3

ユーザーが機器を組み合わせてデバイスの画像を作成できる小さなプログラムを作成しようとしています。最終製品は次のように見え、機能します: 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>
4

1 に答える 1

2

これはmargin、ドラッグ可能なノードに が適用されていることが原因です。これらの CSS 宣言を削除すると、期待どおりに動作するはずです。

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

これは既知の jQuery UI バグです。 http://bugs.jqueryui.com/ticket/6876を参照してください。

于 2012-05-07T02:49:55.910 に答える