1

我正在研究一些 jQuery/JavaScript，它可以拖动 div 并同时能够操作页面上的其他 div（特别是图像）。可移动的 div 基本上是一个透明的矩形，用于模拟镜头。我遇到的问题是我无法弄清楚如何将点击传递到可移动 div 下方的图像。我已经阅读了 pointer-events CSS 属性，并尝试将可移动 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 可拖动来简化事件处理。

使用的技巧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 回答