如何使亲本DIV的子DIV充当亲本DIV的角色
如何使亲本DIV的子DIV充当亲本DIV的角色
提问于 2018-09-29 20:37:19
我有个大问题我需要一个解决办法。
所以我有这个窗口(父分区)和里面的标题(子分区)。
我使用jQuery和jQuery UI来完成一个可拖动的窗口。但是，使整个窗口移动的唯一方法是执行$('#parent').draggable();，并且尝试在#child上这样做会破坏窗口。然后，唯一可拖动的元素将是标题(子div)，并且窗口(父div)将保持不变。
橱窗(，窗口应该只能由标题栏拖动)：这是不应该发生的，但它确实发生了，因为函数作用于父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实际上拖动窗口和它本身的方法，只有将光标放在标题上才能使窗口移动。
提前谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-09-30 00:32:24
您需要使用jQuery UI handle选项来指定允许拖动哪些元素。jQuery UI网站上的有一页。
当您将一个元素设置为可拖动时，您将把{ handle: "selector" }作为参数传递给draggable()。在您的情况下，您将通过{ handle: ".caption" }。
若要在PHP中创建窗口，CreateWindowFn函数中的相关行将更改为：
echo "<div class=\"window\" onload=\"$('#$windowid').draggable({ handle: '.caption' });\" id=\"$windowid\" style=\"";页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52572354
复制相关文章
相似问题
腾讯云开发者
