JQuery UI draggable - ограничить внутренний элемент в родительском, когда внутренний элемент больше родительского - PullRequest
Новая
       21

JQuery UI draggable - ограничить внутренний элемент в родительском, когда внутренний элемент больше родительского

6 голосов
/ 28 марта 2011

Я пытаюсь добиться этого эффекта с помощью jQuery UI - очень похоже на то, как вы обрезаете изображение на Facebook:

http://blog.creonfx.com/examples/javascript/facebook-cropping-mootools.html

Вот очень простой тестовый пример в HTML (img внутри div): 

<div>
    <img src="fat_cat.jpg">
</div>

и вот логика, которая кажется подходящей для этой цели - однако она незакончена: 

$("img").draggable({ drag: dragHandler });

function dragHandler(event, ui) {
    var x = event.target.x - event.target.parentNode.offsetLeft;
    var y = event.target.offsetTop;

    if(x > 0) {
        // How to constrain the movement here?
    }
    if(x < -(event.target.offsetWidth -
            event.target.parentNode.offsetWidth)) {
    }
    if(y > 0) {
    }
    if(y < -(event.target.offsetHeight - 
             event.target.parentNode.offsetHeight)) {
    }

    $("p").text(x + ", " + y);
}

Моими первыми попытками было изменение переменных offsetLeft & offsetTop во всех их множественных точках доступа, но, похоже, у меня ничего не получалось.

Вот jsFiddle с объяснением выше: http://jsfiddle.net/g105b/FdkBK/

1 Ответ

6 голосов
/ 29 марта 2011

Вы можете фактически сделать это с внутренним контейнером, ширина / высота которого рассчитана, чтобы позволить изображению перемещаться только на определенное расстояние. Конечно, вы также должны правильно расположить внутренний контейнер.

Вот мой пример:

Markup: 

<div id="outer"> <!-- position: relative -->
    <div id="inner"> <!-- position: absolute -->   
        <img src="">
    </div>
</div>

Сценарий: 

var img = $("img").draggable({ containment: '#inner'}),
    h = img.height(),
    w = img.width(),
    outer = $('#outer'),
    oH = outer.height(),
    oW = outer.width(),
    iH = h + (h - oH),
    iW = w + (w - oW),
    iT = '-' + ((iH - oH)/2) + 'px',
    iL = '-' + ((iW - oW)/2) + 'px';

$('#inner').css({ width: iW, height: iH, top: iT, left: iL });
...