javascript 使用 jQuery UI,可以拖动矩形,但只能在父区域内(使用 Draggable 属性)。 该区域可以有一个活动矩形(另外用边框颜色突出显示,您可以在样式表中设置一个额外的类,例如选中)。 当鼠标光标在矩形上按下时,该块变为活动状态(此类被分配给它),而先前的活动矩形(如果有)变为非活动状态(该类被“删除”)。 如果用户单击共享区域,活动属性将从活动矩形中重置。代码实例
时间: 2024-02-15 13:01:38 浏览: 18
好的,以下是一个简单的实现代码示例:
HTML:
```html
<div id="parent">
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
</div>
```
CSS:
```css
#parent {
width: 400px;
height: 400px;
border: 1px solid black;
position: relative;
}
.rectangle {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
}
.active {
border: 2px solid red;
}
```
JavaScript:
```javascript
$(function() {
var activeRectangle = null;
$(".rectangle").draggable({
containment: "#parent",
start: function() {
// Set the clicked rectangle as active
$(this).addClass("active");
activeRectangle = $(this);
},
stop: function() {
// Reset the active rectangle
$(this).removeClass("active");
activeRectangle = null;
}
});
$("#parent").click(function() {
// Reset the active rectangle when the parent is clicked
if (activeRectangle) {
activeRectangle.removeClass("active");
activeRectangle = null;
}
});
});
```
在这个示例中,我们使用了 jQuery UI 的 Draggable 属性来实现拖动矩形的功能,并在拖动开始和结束时分别设置和重置活动矩形。我们还使用了 click 事件来处理在共享区域单击的情况,以重置活动矩形。 CSS 中的 .active 类用于突出显示当前活动的矩形。