javascript编写一个程序 使用 jQuery UI，可以拖动矩形，但只能在父区域内（使用 Draggable 属性）。 该区域可以有一个活动矩形（另外用边框颜色突出显示，您可以在样式表中设置一个额外的类，例如选中）。 当鼠标光标在矩形上按下时，该块变为活动状态（此类被分配给它），而先前的活动矩形（如果有）变为非活动状态（该类被“删除”）。 如果用户单击共享区域，活动属性将从活动矩形中重置。代码实例

以下是一个简单的示例代码，可以实现您的需求：

HTML：

<div class="parent">
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
</div>

CSS：

.parent {
  width: 400px;
  height: 400px;
  border: 1px solid black;
  position: relative;
}

.rectangle {
  width: 50px;
  height: 50px;
  background-color: red;
  border: 1px solid black;
  position: absolute;
}

.active {
  border-color: blue;
}

JavaScript：

$(function() {
  $(".rectangle").draggable({
    containment: "parent",
    start: function() {
      $(this).addClass("active").siblings().removeClass("active");
    }
  });
  
  $(".parent").click(function() {
    $(".rectangle").removeClass("active");
  });
});

以上代码中，我们使用了 jQuery UI 的 Draggable 属性来实现矩形的拖动，并使用了 addClass 和 removeClass 方法来切换矩形的活动状态。当用户单击父区域时，我们使用 removeClass 方法来重置活动属性。