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を実行しているときにコンソールウィンドウを見ると、スコープ外の変数にアクセスしようとすると、いくつかのエラーが表示されます。

ただし、私が行うことは、「停止」イベントを使用して、ポジショニングを行うことです。詳細については、 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' });
            }
       }
    });
});
于 2012-07-23T18:36:07.770 に答える
0

私はこれを見つけました：

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

それはあなたがやりたいことと似ていると思います。それが役に立てば幸い！

于 2012-07-28T06:33:43.453 に答える