Question

从内部可拖动的jQuery ui触发模糊事件，因此我无法为容器设置边框。我有什么想念的吗？如何在可拖动元素的选择上设置边框。我正在尝试在select（在鼠标按下时）上添加边框。

$("#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

使用dragstart和dragstop事件。这是文档https://developer.mozilla.org/en-US/docs/Web/API/Document/drag_event

的参考

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

使用mousedown在拖动开始之前添加边框

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

Answer 2

您可以使用拖动.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>

Answer 3

您可以简单地添加一个新的css类，以指定其处于活动状态时的外观：

#draggable:active {
    border: 1px solid;
}

在焦点上为jquery可拖动元素添加边框

3 个答案: