1

Webページで、テキストが切り取られて省略記号で表示される小さなdivを表示したいのですが、マウスオーバーすると、すべてのテキストが表示されるように大きなサイズに拡大する必要があります。次に、jqueryuiのドラッグアンドドロップを使用して、テキストボックスをグリッドに移動できるようにします。ドラッグして配置するときは、また小さいサイズにしたいです。

私はこのようにこれをやろうとしました：

マウスオーバー機能：

$(function() {
  $( ".ui-widget-content" ).mouseover(function(){
    $(this).css("width", "200px");
    $(this).css("height", "200px");
  }).mouseout(function(){
    $(this).css("width", "100px");
    $(this).css("height", "40px");            
  })
})

ドラッグ可能な関数：

    $(function() {
      $( ".ui-widget-content" ).draggable({ snap: "td.chart:not(:first-child)", snapMode: "inner", revert: "invalid", snapTolerance: 40, stack: ".ui-widget-content",
        drag: function( event, ui ) {
          $(this).css("width", "100px");
          $(this).css("height", "40px");
        }
      });
    });

ドロップ可能な関数：

    $(function() {
      $( "td.chart:not(:first-child)" ).droppable({
        accept: ".ui-widget-content",
        drop: function( event, ui ) {
          $("#" + ui.draggable.attr("id") ).css("background-color","#D7F970");
        }
      });
    });

ドラッグアンドドロップされているDiv：

Lorem Ipsum

上記を使用して、誰かがdivをドラッグしようとすると、最初にマウスオーバーがトリガーされ、divが拡大され、次にドラッグスタートによって縮小されて問題ないと思いました。ただし、これをテーブルに配置しています（droppable関数のセレクター "td.chart：not（：first-child）"を参照）。テーブルの最初の3行では機能しますが、divはスナップして取得しなくなります。 4行目と5行目にドロップしました。マウスオーバー機能を削除しても、この問題は発生しません。誰もがここで何が起こっているのか理解していますか？

4

1 に答える 1

1

あなたのhtmlを見てみると役立つかもしれません。

それは単なる予感ですが、ドラッグ可能なアイテムのサイズが大きすぎて、複数のドロップ可能なアイテムを超えているだけの問題かもしれません。ドロップ可能な要素の許容範囲を変更して、それが役立つかどうかを確認することをお勧めします。

$( ".selector" ).droppable({ tolerance: "pointer" });

jQueryドキュメントの状態：

Toleranceは、ドラッグ可能オブジェクトがドロップ可能オブジェクトの上にあるかどうかをテストするために使用するモードを指定します。可能な値：

  • フィット：ドラッグ可能はドロップ可能と完全にオーバーラップします
  • 交差：ドラッグ可能はドロップ可能と少なくとも50％オーバーラップします
  • ポインタ：マウスポインタがドロップ可能なものと重なっています
  • タッチ：ドラッグ可能はドロップ可能と任意の量でオーバーラップします
于 2012-08-13T15:23:59.647 に答える