Question

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

Answer 1

我创建了一个演示，它是使用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>');

})

DEMO：http://jsfiddle.net/nfjjV/4/

旧版浏览器不支持

document.elementFromPoint。您还可以使用jQuery position或offset方法将元素的坐标与查看器的当前位置进行比较，以实现完全兼容的浏览器

是否可以点击可移动的div？

1 个答案: