我第一次尝试使用 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 需要一个容器，如果你看一下 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>