Question

I am kinda new in jquery and im facing a problem to drag an element if i click on its child element.

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

If i click on ‘.floatingPanel’ area, It’s still dragging. Where do I do wrong here?
the example is here: http://jsfiddle.net/6g6Xr/23/

OK, Its solved, thanks to Polmonite for http://jsfiddle.net/6g6Xr/28/

Answer 1

If you write:

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

you’re saying that the .floatingPanel element is to drag.
You should actually do:

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

while specifying all the options of the draggable following the jQuery draggable’s API: http://api.jqueryui.com/draggable/.

If what you wanted is to drag the .floatingPanel only through the .dragger you should write:

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