jQuery UIでドロップイベントが発生しません。

私は、ユーザーが装置の一部を一緒に置いて装置の画像を構成できるようにする小さなプログラムを作成しようとしています。最終製品はこのように見て、機能します：私はjQueryのUIを使用していますhttp://oliverdjones.com/learning/dragtester.html jQuery UIでドロップイベントが発生しません。

：

http://oliverdjones.com/learning/nebulizer.swfはここに現在のバージョンです。ドラッグイベントは期待どおりに機能していますが、私はまだドロップイベントを発生させることができませんでした。私は完全にアイデアがありません。コードは次のとおりです。

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

出典

2012-05-06 SouthCoaster

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

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

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

出典

2012-05-07 02:49:55

ありがとうございました。私は実際に最初からやり直して、絶対的な位置付けのためのマージンを排除し、完全に動作します... FirefoxではWebkitではなく！ここに現在のバージョンがあります： http://oliverdjones.com/learning/nebulizer.html – SouthCoaster

ポジショニングと関係があるようです。私は "基本"要素の位置を変更し、アプリはSafariとChromeで期待どおりに機能しています。 – SouthCoaster

jQuery UIでドロップイベントが発生しません。

答えて

関連する問題