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 draggable的API之后指定draggable的所有选项：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");
    });
});

请参阅fiddle

应该工作

jQuery在其子元素上的mousedown事件时拖动一个元素

2 个答案: