1

私は、div をドラッグし、同時にページ上の他の div (特に画像) を操作できるようにする jQuery/JavaScript に取り組んでいます。可動 div は基本的に、レンズをシミュレートするための透明な長方形です。私が抱えている問題は、可動 div の下の画像にクリックを渡す方法がわからないことです。CSS の pointer-events プロパティを調べて、可動 div に対して none に設定しようとしましたが、可動 div が可動しなくなります。この可動 div を移動可能に保ちながらクリックを渡す方法はありますか?

編集:私の現在のコードを求めているすべての人に、これが私がこれまでに持っているJavaScriptです:

<script>
$(document).ready(function(){

$('img').click(function(e) {
  $(document).unbind('keypress');
  $(document).keypress(function(event) {
    if ( event.which == 115) {
      $(e.target).css('width', '+=25').css('height', '+=25');
    };

    if ( event.which == 97) {
      $(e.target).css('width', '-=25').css('height', '-=25');
    };
  });
});

//code to drag the lens around with the mouse
$("#draggableLens").mousemove(function(e){

  var lensPositionX = e.pageX - 75;
  var lensPositionY = e.pageY - 75;

  $('.lens').css({top: lensPositionY, left: lensPositionX});

});
});
</script>
4

1 に答える 1

2

document.elementFromPoint可動要素の上にある最も近い画像を見つけるために使用する概念実証のデモを作成しました。イベント処理を簡素化するために jQueryUI draggable を使用しました。

使用の秘訣document.elementFromPointは、他の要素を探すのに十分な時間、ドラッグしている要素を非表示にするか、ドラッグしている要素自体が最も近い要素であることです。

active最も近い要素にクラスを追加すると、ビューアをクリックしてアクティブな要素にアクセスできます

デモ コードではLI、代わりにタグを使用します。IMG

var $images = $('#list li');
timer = false;
$('#viewer').draggable({
    drag: function(event, ui) {
        if (!timer) {
            timer = true;
            var $self = $(this);
            /* use a timeout to throttle checking for the closest*/
            setTimeout(function() {
                /* must hide the viewer so it isn't returned as "elementFromPoint"*/
                $self.hide()
                var el = $(document.elementFromPoint(event.pageX, event.pageY));                    
                $('.active').removeClass('active');
                if ($el.is('li')) {
                    $el.addClass('active')
                }
                $self.show()
                timer = false;
            }, 100);
        }
    }
}).click(function() {
    if ($('.active').length) {
        msg = 'Clicked on: ' + $('.active').text();

    } else {
        msg = 'Click - No active image';
    }
    $('#log').html(msg + '<br>');

})

デモ: http://jsfiddle.net/nfjjV/4/

document.elementFromPoint古いブラウザではサポートされていません。jQuerypositionまたはoffsetメソッドを使用して、ブラウザの完全な互換性のために、要素の座標とビューアの現在の位置を比較することもできます。

于 2012-11-17T14:14:09.677 に答える