jQuery: перетащить/отрегулировать изображение в круговом div

Question

Я пытаюсь создать фотографию профиля пользователя в круговом div. Подобно тому, что пользователь может делать с изображением профиля facebook или обложкой.

Примечание: здесь изображение является фоновым изображением div. Не внутри <img>.

Как можно заставить пользователя перетащить/настроить функции изображения для кругового div?

CSS для круговой Div

.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 должен быть округлен и с переполнением скрыт, а для дочернего образа вы можете использовать метод jqery u) draggable(). Посмотрите здесь примеры: JQuery UI Examples

---

Это один пример, но переполнение WebKit скрыта прослушивается. Jsfiddle example вы можете попробовать с одной маской для fixxing ошибки

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

Answer 2

вы можете использовать jqueryUI draggable() метод:

$('image_to_drag').draggable();