jQuery UI .position()鼠标事件跟踪与边界

jQuery UI .position() mouse event tracking with boundaries

本文关键字：事件 跟踪 边界 鼠标 UI position jQuery      更新时间：2023-09-26

我正在制作一个图片库，我想在其中以相同的尺寸显示所有缩略图并隐藏任何溢出，但是在onmouseover时，用户可以通过在缩略图父元素中移动鼠标来看到缩略图的隐藏部分，而图像则跟踪其移动。

jQuery UI: 

$( '#targetElement' ).mousemove(function( event ) {
  $( "#position img" ).position({
    my: "center",
    of: event,
    collision: "none"
  });
});
CSS: 

#targetElement {
  width: 200px;
  height: 150px;
  border: 1px solid #333;
  overflow: hidden;
  margin: 50px auto;
}
.positionDiv {
  width: 200px;
  height: 150px;
  position: relative;
}
.positionDiv img {
  min-height: 150px;
  max-width: 200px;
  position: absolute;
  top: -50%;
}
HTML: 

<div id="targetElement">
  <div class="positionDiv" id="position"><img src="http://er.pe/server/php/files/thumbnail/ill_09.jpg"></div>
</div>

请参阅JSFiddle查看我当前的进度。

我想做的是设置垂直边界，使图像的边缘不能越过其父元素的垂直边界。

这可能吗?

我不太明白你在图像父元素的边界内设置边界是什么意思，因为你已经使用了溢出隐藏，并且大多数图像在拖动时已经越过了边界。也许你能告诉我你想要什么。

但是这里有一个基本的例子，你可以使用'jquery-ui-draggable '让图像保持在边界内。也许你可以修改它来完成你的设计。

下面是一个例子:

   var right = 0;
    var bottom = 0;
    var top = 0;
    var left = 0;
    adjustment = 5;
    $( "img" ).draggable({
        start: function ( event, ui ) {
            bottom = $(this).parent().parent().height();
            right = $(this).parent().parent().width();
        },
        drag: function( event, ui ) {
            if(ui.position.top <= top-adjustment)
                ui.position.top = top-adjustment;
            if(ui.position.left <= left-adjustment)
                ui.position.left = left-adjustment;
            console.log(ui.position.left);
            if(ui.position.left+$(this).width() >= right+adjustment)
                ui.position.left = right-$(this).width()+adjustment;
            if(ui.position.top+$(this).height() >= bottom+adjustment)
                ui.position.top = bottom-$(this).height()+adjustment;
        }
    });
http://jsfiddle.net/trevordowdle/B5f5M/

http://jsfiddle.net/trevordowdle/DdMgP/4/

相关文章：