1

ドラッグアンドドロップ機能を使用して、画像を他のdivにドラッグすると、画像のサイズが変更されます。以下のコードを参照してください。ただし、元の画像に対して左隅にサイズ変更されるため、カーソルと画像が別の場所にあるため、ユーザーが混乱します。画像のサイズを変更してカーソルに対する相対位置を維持する方法、またはカーソルを中央に置いて画像を中央に配置する方法はありますか?

これは私が今使っているCSSコードです:

.Skin .PGR .DragAndDrop .stack div ul li.stack span label {
    width: 200px;
    height: 255px;
}
.Skin .PGR .DragAndDrop .stack div ul li.stack span label img {
    width: 200px;
    height: 255px;
    visibility: visible;
}
.Skin .PGR .DragAndDrop .stack .Group li.stack span.rank {
    visibility: hidden;
}
.Skin .PGR .DragAndDrop .stack div.Group ul li span img {
    width: 177px;
4

1 に答える 1

0

あなたが何をしようとしているのか理解できれば、このようなことがうまくいくはずです。基本的には、マウス座標を取得してから、画像の位置をマウス座標から幅/高さの半分を引いた値に設定して中央に配置するだけです。お役に立てれば!

 window.onload = track;
 var mouseX, mouseY;
 function track() {
     if (window.Event) {
          document.captureEvents(Event.MOUSEMOVE);
     }
     document.onmousemove = getCursorXY;
  }

 function getCursorXY(e) {
     mouseX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
     mouseY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
 }

 function updatePosition() {
      var img = document.getElementById('myimage'); 
      var width = img.clientWidth;
      var height = img.clientHeight;

      img.style.position = "absolute";
      img.style.top = mouseY-(height/2);
      img.style.left = mouseX-(width/2);
 }
于 2012-12-24T09:50:40.263 に答える