Question

我正在使用隐藏溢出的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'
});

});

Answer 1

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

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

$().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' });
            }
       }
    });
});

Answer 2

我发现了这个：

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

猜猜它和你想做的一样。希望它有所帮助！

根据图像大小计算移动div

2 个答案: