O jQuery UI selecionável não exibe o esboço da seleção, por quê?
-
27-10-2019 - |
Pergunta
Na página de demonstração selecionável do jQuery UI: http://jqueryui.com/demos/selectable/#padrão quando você seleciona elementos, você pode ver o contorno da caixa de seleção.Por que isso não aparece quando eu tento?
Este não é meu violino, mas também tem o mesmo problema: http://jsfiddle.net/jMDVm/40/
Solução
É porque está faltando a folha de estilo jQuery UI, que contém a classe para definir o estilo da caixa auxiliar de seleção.Adicione o seguinte ao seu CSS:
.ui-selectable-helper {
position: absolute;
z-index: 100;
border: 1px dotted black;
}
$(document).ready(function() {
$("#selectable").selectable({
selected: function(event, ui) {
$('.status').text("Selected");
},
selecting: function(event, ui) {
$('.status').text("Selecting");
}
});
});
#wrapper {
width: 250px;
height: 100px;
}
#selectable {
background: black;
width: 250px;
height: 16px;
}
#selectable .ui-selecting {
background: silver;
}
#selectable .ui-selected {
background: gray;
}
#selectable div {
background-color: #777;
}
.ui-selectable-helper {
position: absolute;
z-index: 100;
border: 1px dotted black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
<div id="wrapper">
<div id="selectable">
<div>Hello</div>
<div>Select</div>
<div>Me</div>
</div>
</div>
<div class="status"></div>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow