0

現在別のpng画像の下にある画像をドラッグする必要があります。

このコードを使用すると、これを簡単に実行できると思いました。

$(document).ready(function() {
    $(".imageOverlay").mousedown(function(eventObject){
    $('#draggable').drag();
    return false;
    });
});

しかし、うまくいかないようです。

上にある画像のない例をここで見つけることができます

そして、これが上にある画像の例です

私はjQueryの第一人者ではないので、答えは比較的単純にしてください。

ありがとうございました。

4

2 に答える 2

1

ドラッグ可能なオブジェクトの幅、高さ、および配置を取得し、下にある画像に同じCSSの配置、幅、高さを与えることで、これを機能させることができました。

これはコードです：

    var imgdrag = $(#draggable); //This is the box you drag
    var imgselector = $(.imageUnderlay); //This is the image underneath

    //Get the height, width and position of the draggable box
    var height = imgdrag.height();
    var width = imgdrag.width();
    var top = imgdrag.css("top");
    var left = imgdrag.css("left");

    //Add the css style to the image underlay
    imgselector.css('top', top);
    imgselector.css('left', left); 
    imgselector.css('height', height + 'px'); 
    imgselector.css('width', width + 'px');
于 2012-10-22T17:55:42.700 に答える
0

代わりにこれを実行してください: #container の onmousedown、onmousemove、onmouseup イベントをリッスンします。jQuery を使用してイベントにバインドします。onmousedown が発生し、onmousemove が起動すると、位置に e.pageX、e.pageY、および $('#container').offsetLeft および $('#container').offsetTop を使用し、下にある画像の新しい場所を設定します。 . ユーザー エクスペリエンスをレスポンシブにする場合は、移動ロジックを onmousemove にする必要があります (基になる画像がカーソルと共に移動します)。onmouseup が発生したときに、下にある画像の移動を停止します。

例として、次を確認してください。

Jquery マウスダウン + マウス移動

このページの下部には、コンテナー内でマウスの位置を取得する例があります (e.pageX、e.pageY、$('#container').offsetLeft および $('#container').offsetTop):

http://docs.jquery.com/Tutorials:Mouse_Position

シャーハン

于 2012-08-21T07:22:27.160 に答える