如何使父级DIV的子级DIV充当父级DIV

Question

我有这个巨大的问题需要解决。

所以我有这个窗口（父Div）和其中的标题（子Div）。
我正在使用jQuery和jQuery UI完成可拖动的窗口。 但是，使整个窗口移动的唯一方法是执行$('#parent').draggable(); 并尝试在#child上执行此操作将打破窗口。 然后，唯一可拖动的元素将是标题（子div），并且窗口（父div）将保留在原位。

Showcase（ 假定窗口只能由标题栏拖动 ）： 这不应该发生，但是会发生，因为函数作用于父div而不作用于子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;
}

我需要一种使子div实际拖动窗口及其本身的方法，只有将光标置于标题上才能使窗口可移动。

提前致谢。

Answer 1

您需要使用jQuery UI handle选项来指定允许拖动哪些元素。 jQuery UI网站上有一个页面 。

将元素设置为可拖动时，您可以将{ handle: "selector" }作为参数传递给draggable() 。 在您的情况下，您可以传递{ handle: ".caption" } 。

要在PHP中创建窗口，CreateWindowFn函数中的相关行将更改为：

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