jQuery的：拖動/調整圖像位置在一個圓形的div

Question

我想要在圓形div中的用戶的個人資料照片。類似於用戶可以使用Facebook的個人資料圖片或封面圖片進行的操作。

注意：這裏的圖片是div的背景圖片。不在<img>之內。

如何讓用戶拖放/調整圓形div的圖像功能？

CSS的圓股利

.circular { 
    width: 6em; 
    height: 6em; 
    border-radius: 3em; 
    -webkit-border-radius: 3em; 
    -moz-border-radius: 3em; 
    background: url('../img/id.jpg') no-repeat; 
    box-shadow: 0 0 8px rgba(0, 0, 0, .8); 
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8); 
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8); 
} 

Answer 1

你可以使用一個div像顯示，進入把你的形象。 父div需要被四捨五入並且溢出隱藏，並且對於圖像子項，您可以使用jquery ui的draggable（）方法。 看看這裏的例子：JQuery UI Examples

---

這是一個例子，但WebKit的溢出隱患被竊聽。 Jsfiddle example 你可以用一個面具嘗試fixxing錯誤

$(document).ready(function() 
{ 
    $(".avatar").draggable(); 
}); 

Answer 2

可以使用jQueryUI的draggable()方法：

$('image_to_drag').draggable();