不能同时使用DRAGGABLE、time和SELECTABLE
不能同时使用DRAGGABLE、time和SELECTABLE
提问于 2019-07-06 01:09:36
我第一次尝试使用Jquery-ui，并尝试创建一个带有上面标题中提到的所有3个功能的div。
您可以在此处找到JSBin链接：https://jsbin.com/haleyucipu/1/edit?html,output
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Resizable - Visual feedback</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-selecting { background: #FECA40; }
.ui-selected { background: #F39814; color: white; }
.ui-resizable-ghost { border: 1px dotted gray; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#resizable" ).resizable({
ghost: true,
helper: "ui-resizable-helper",
animate: true
}).draggable().selectable();
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content"></div>
</body>
</html>只有，可调整大小和可拖动的工作！Selectable不需要！
回答 1
Stack Overflow用户
发布于 2019-07-06 02:27:21
Selectable需要一个容器，如果你看一下examples，就会发现它们使用了<ol>。
考虑以下代码：
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Resizable - Visual feedback</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
#resizable {
width: 150px;
height: 150px;
padding: 0.5em;
}
#resizable h3 {
text-align: center;
margin: 0;
}
.ui-selecting {
background: #FECA40;
opacity: .65;
}
.ui-selected {
background: #F39814;
color: white;
}
.ui-resizable-ghost {
border: 1px dotted gray;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("#resizable").resizable({
ghost: true,
helper: "ui-resizable-helper",
animate: true
}).draggable().parent().selectable();
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content"></div>
</body>
</html>
这使得<body>成为容器，现在所有的UI交互都可以工作。
希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56906967
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号