javascript - 向焦点上的 jquery 可拖动元素添加边框

Question

从 jquery ui Draggable 内部它会触发模糊事件，因此我无法为容器设置边框。我有什么遗漏的吗？如何在可拖动元素的选择上设置边框。我正在尝试在选择上添加边框(按下鼠标)。

$("#draggable").draggable();
$("#draggable").on('focus', function() {
  $(this).css('border', '1px solid')
}).blur(function() {
  $(this).css('border', '')
});

<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>
<div id="draggable" class="ui-widget-content" tabIndex = -1>
  <p>Drag me around</p>
</div>

Answer 1

您可以使用拖动.ui-draggable-dragging时添加的类，也可以使用开始和停止事件添加您自己的类。

$("#draggable").draggable({
  start: function(event, ui) {
    ui.helper.addClass('active');
  },
  stop: function(event, ui) {
    ui.helper.removeClass('active');
  }
});

#draggable {
  width: 100px;
  height: 100px;
  background: #ccc;
}

.ui-draggable-dragging {
  border: 3px solid red;
}

.active {
  outline: 3px dashed yellow;
}

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<div id="draggable">Drag me</div>