jQuery：在圆形div中拖动/调整图像位置

Question

我正在尝试用圆形div中的用户个人资料照片。类似于用户可以使用Facebook的个人资料图片或封面图片。

  

注意：此处图片是div的背景图片。不在<img>内。

如何让用户拖动/调整圆形div的图像功能？

循环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

您可以使用jqueryUI draggable()方法：

$('image_to_drag').draggable();

Answer 2

你可以使用像显示器这样的div来放置你的图像。 父div需要舍入并且隐藏溢出，对于image子，你可以使用jquery ui的draggable（）方法。 在这里查看示例：JQuery UI Examples

---

这是一个例子，但隐藏了webkit溢出。 Jsfiddle example 你可以试试一个面具来修复bug

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