как сделать перетаскивание «#box» только перетаскиванием div «#head», а не перетаскивание «#box» при перетаскивании «#content»

Question

это мой код:

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

и сценарий:

$('#box').draggable()

демо здесь: http://jsfiddle.net/VRxZe/

спасибо

Answer 1

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