jQuery UI .position（）帶有邊界的鼠標事件跟蹤

Question

我正在使用一個圖庫，在該圖庫中我想以相同的尺寸顯示所有縮略圖並隱藏任何溢出，但是在鼠標懸停時，用戶可以通過在縮略圖父元素內移動鼠標來查看縮略圖的隱藏部分，而圖像跟蹤其運動。

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了解我當前的進度。

我想做的是設置垂直邊界，以使圖像的邊緣不能越過其父元素的垂直邊界。

這可能嗎？

Answer 1

我不太了解在圖像父元素的邊界內設置邊界的含義，因為您已經在使用隱藏的溢出，並且拖動時大多數圖像已經越過邊界。也許您可以為我澄清一下。

但是這是一個基本示例，說明如何使用“ 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/