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

Question

我是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/

好的，这已经解决了，这要感谢Polmonite的http://jsfiddle.net/6g6Xr/28/

Answer 1

如果您写：

$('.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'
    });
});

Answer 2

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

看到小提琴

应该管用