How to make Child DIV of Parent DIV act as a Parent DIV

Question

I have this huge problem I need a fix for.

So I have this window (parent Div) and the caption inside (child Div).
And I'm using jQuery and jQuery UI to accomplish a draggable window. But, the only way to make the entire window move is to do $('#parent').draggable(); and trying to do this on #child will break the window. The only draggable element then would be the caption (child div), and the window (parent div) will stay in place.

Showcase ( The Window Is Supposed To Be Draggable Only By The Caption Bar ): This is not supposed to be happening but it does, because function acts on parent div and not child div

index.php :

<?php CreateWindowFn('Log into system', '<button>Log in</button>', 'sys_login_container', 'login_caption', 320, 500); ?>
// Returns: <div class="window" onload="$('#sys_login_container').draggable();" id="sys_login_container" style="width:320px !important;height:500px !important"><div class="caption" id="login_caption">Log into system</div><div class="text"><button>Log in</button></div></div>

CreateWindowFn.php :

function CreateWindowFn($caption, $function, $windowid, $captionid, $width, $height) {
    if (empty(null)) {
        $text = $function;
        echo "<div class=\"window\" onload=\"$('#$windowid').draggable();\" id=\"$windowid\" style=\"";
        if (!empty($width)){echo "width:$width" . "px !important;";}else{;;}
        if (!empty($height)){echo "height:$height" . "px !important";}else{;;}
        echo "\"><div class=\"caption\" id=\"$captionid\">$caption</div><div class=\"text\">$text</div></div>";
        return (bool) 1;
    } else {
        return (bool) 0;
    }
}

interface.css [ .window ]:

.window {
    padding:0px;
    margin:0px;
    width:auto;
    height:auto;
    background:#fff;
    border:1px solid #000;
    color:#000;
    box-sizing:border-box;
}

.window .caption {
    background:#000;
    height:16px;
    color:#fff;
    width:100%;
    border:1px solid #fff;
    text-align:center;
    font-size:16px;
    box-sizing:border-box;
    cursor:default;
}

.window .caption::selection {
    background:none;
}

.window .text {
    background:none;
    background-color:none;
    border-top:1px solid #000;
    width:auto;
    height:auto;
    padding:-1px 2px 2px 2px;
    box-sizing:border-box;
}

I need a way to make the child div actually drag the window and itself, only holding the cursor on caption should make the window moveable.

Thanks in advance.

Answer 1

You need to use the jQuery UI handle option to specify what elements are allowed to drag. The jQuery UI website has a page on this.

When you set an element to be draggable you would pass { handle: "selector" } as an argument to draggable() . In your case you would pass { handle: ".caption" } .

To create your window in PHP, the relevant line in your CreateWindowFn function would be changed to:

echo "<div class=\"window\" onload=\"$('#$windowid').draggable({ handle: '.caption' });\" id=\"$windowid\" style=\"";