javascript - 当子元素上发生mousedown事件时，jQuery会拖动该元素

我是jquery中的一种新手，如果我单击其子元素，则im会遇到拖动元素的问题。

HTML
<div class="floatingPanel">
    <div class="dragger">
        Drag from here
    </div>
</div>

JQUERY
$(document).ready(function () {
    $('.dragger').mousedown(function () {
        $('.floatingPanel').draggable({
            opacity: 0.35
        });
    }).mouseup(function () {
        alert("mouse up");
    });
});

如果我单击“ .floatingPanel”区域，它仍在拖动。我在这里哪里做错了？
示例在这里：http://jsfiddle.net/6g6Xr/23/

OK，问题解决了，这要感谢Polmonite的http://jsfiddle.net/6g6Xr/28/

最佳答案

如果您写：

$('.floatingPanel').draggable(...);

您是说.floatingPanel元素要拖动。
您实际上应该这样做：

$(document).ready(function () {
    $('.dragger').draggable({
        opacity: 0.35
    });
});

同时根据jQuery可拖动的API http://api.jqueryui.com/draggable/指定可拖动的所有选项。

如果您只想将.floatingPanel拖到.dragger中，则应编写：

$(document).ready(function () {
    $('.floatingPanel').draggable({
        opacity: 0.35,
        handle: '.dragger'
    });
});