0

我用一个隐藏了溢出的 div 来掩盖一个图像。我试图通过将容器设置为所有内容所在的更大 div 来限制图像可以拖动的数量。我在让容器 div 根据一半图像向上和左重新定位时遇到问题宽度/高度。目标是让用户能够将图像拖动到任何位置，而不能将其拖动到图像边缘之外。

这是一个 jsfiddle：http: //jsfiddle.net/richcoy/uEBDW/20/

HTML

<div id="container">
    <div id="window">
        <img src="http://alumniconnections.com/olc/filelib/COU/cpages/48/Library/chicago_skyline.jpg" class="drag img" alt="chicago" width="300" height="300" />
    </div>
</div>

CSS

body {
    background: white;
    margin: 30px;
}

#container {
    width: 400px;
    height: 400px;
    position: relative;
}

#window {
    width: 200px;
    height: 200px;
    border: 1px solid #6D6D6D;
    overflow: hidden;
    cursor: move;
    position: absolute;
    /* Stop blue overlay on photo */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

jQuery

$().ready(function() {
    $(".drag").draggable({
        containment: "#container"
    });

$('.img').each(function() {
    var imageWidth = $(this).width();
    var imageHeight = $(this).height();
    alert('Width: ' + $(this).width() + '\nHeight: ' + $(this).height()); // For testing purposes only
    var positionTop = -(imageHeight / 2);
    var positionLeft = -(imageWidth / 2);
    alert('Top: ' + positionTop + '\nLeft: ' + positionLeft); // For testing purposes only
});

$('#container').css({
    'top': positionTop + 'px',
    'left': positionLeft + 'px'
});

});
4

2 回答 2

0

运行 jsfiddle 时查看控制台窗口，当您尝试访问范围外的变量时会看到一些错误。

但是，我要做的是使用“停止”事件并进行定位。有关更多信息，请参阅事件停止。下面我正在查看父容器“窗口”的设置，然后检查新的顶部位置是否大于它。如果为真，则将位置设置为父高度的一半。

$().ready(function() {
    $(".drag").draggable({
        containment: "#container",
        stop: function(e,ui) {
            var $me = $(ui.helper[0]);
            var $container = $me.closest('div');
            console.log("Top: " +ui.position.top);
            //console.log("Height: " +$me.height());
            var newTop = $me.parent().height() / 2;
            console.log(newTop);            
            if(ui.position.top > newTop){
                console.log('Setting top to: ' + newTop);
                $me.css({'top' : newTop + 'px','left': '0px' });
            }
       }
    });
});
于 2012-07-23T18:36:07.770 回答
0

我找到了这个：

http://odyniec.net/projects/imgareaselect/

猜猜这与您想要做的事情相似。希望能帮助到你！

于 2012-07-28T06:33:43.453 回答