jQuery UI的可拖動 - 約束父內內元素時內部元件比母

Question

我試圖實現與jQuery UI的這種影響更大 - 非常喜歡的方式，你在Facebook上裁剪圖像：

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

這裏是HTML一個非常簡單的測試案例（一div內img）：

<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/

Answer 1

實際上，你可以用一個內部容器，其寬度/高度計算爲只允許圖像行駛一定距離，做到這一點。當然你也必須適當地放置內膽。

這是我在它去：

標記：

<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 });