0

HTML ドキュメントに 2 つの異なる div コンテナがあります。ドラッグ可能なものをドロップ可能なものにドラッグし、jquery .offset() を使用してその上に直接配置できるようにしたいと考えています。また、ドロップ可能オブジェクトがヒットされなかった場合、ドラッグ可能オブジェクトは元の位置に戻ります。

これは IE と Firefox では問題なく動作しますが、ズーム レベルが 100% でな​​い場合、WebKit ブラウザー (Chrome、Safari) で問題が発生するようです。.offset()での位置合わせはズームレベル110%に対して10%程度ずれているようで、ズームレベルに応じて誤差が大きくなります。

これが私の問題に対するJava Scriptコードです。ドラッグ可能およびドロップ可能は、通常の div 要素です。

<!DOCTYPE html>
<html>
<head>
<title>Jquery offset example - WebKit browser</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

<script type="text/javascript">

$(document).ready(function (){
  var droppable = $("#droppable");
  var draggable = $("#draggable");


  draggable.data("offset", draggable.offset());
  var hit = false;

  draggable.draggable({
    drag: function(){
        hit = false;
    },

      stop: function(){
          if(!hit) {
              $(this).offset($(this).data("offset"));
          }
      }        
  });

  droppable.droppable({
     drop: function(e, ui){
         ui.draggable.offset($(this).offset());
         hit = true;
     } 
  });
});
</script>
</head>

<body>

  <div id="text" style="margin-bottom:20px">
    <div id="droppable"style="width:30px; height:20px; border-style:solid; border-width:1px; background-color:#FFFFFF"></div>
  </div>

  <div id="draggables">
    <div id="draggable" style="width:30px; height:20px; position:relaive; border-style: solid; border-width: 1px; background-color:#FFFFFF">gap</div>
  </div>

</body>

jquery バージョン 1.9.1 と jquery-ui バージョン 1.10.2、および Google Chrome バージョン 25.0.1364.172 を使用しています。

誰かがこの問題を解決する解決策を持っていますか?

4

0 に答える 0