Javascript 如何制作'#盒子'；只能通过拖动'#头部'；div，而不是使'#盒子'；拖动时可拖动'#内容'；

这是我的代码：

<div id="box" style="border:1px solid red;height:100px;width:150px;position:relative;background:#eee">
        <div id="head" style="background:black">drag me</div>
        <div id="content" contenteditable=true style="border-bottom:1px solid red;height:70px;margin-bottom:5px;"> edit it </div>
        <input id="ok" type="button" value="ok"/>
        <input id="cancel" type="button" value="cancel"/>
    </div>

演示如下：

---

谢谢

@RocktheSixstring我不认为这才是@zjm1126真正想要的。他只是想让“头”元素可以拖动，我不认为他只是想让“头”的一小块可以拖动。以下是我认为他要求的：只是展示选项…：有各种各样的方法来实现它。我喜欢哈门的答案，因为它是正确的。而且，这也是为什么我没有给出答案的原因。只是好玩而已。@RocktheSixstring好的，明白了。

$('#box').draggable()

$('#box').draggable({
    handle: $('#head')
});