javascript - jQuery在其子元素上发生mousedown事件时拖动元素

Question

我在 jquery 中有点新，如果我单击其子元素，我将面临拖动元素的问题。

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

如果你想要的只是通过 .dragger 拖动 .floatingPanel 你应该写：

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

看小提琴

应该管用