0

Eu tenho uma ul com várias li dentro, e cada li possui um span:

html:

<ul class="list-group">

  <li class="atividade-style list-group-item">
    <span class="atividade">
      Item1
    </span>
    <div class="pull-right btn-group">
      <button class="fa fa-pencil-square-o excluir-atividae btnSemBorda"></button>
    </div>
  </li>

</ul>

css

.atividade-style {
    cursor: pointer;
    background-color: #f0f0f0;
}

.atividade{

}

Javascript:

$(".atividade").draggable({
    appendTo: 'body',
    helper: "clone",
    opacity: .95,
    refreshPositions: true,
    revert: "invalid",
    revertDuration: 300,
    scroll: false
});

Perceba que por causa da classe "list-group-item" (classe do bootstrap) a li sempre vai ter um tamanho maior do que o span, que tem uma função draggable. Preciso fazer essa função ser capturada e começar a executar quado eu arrastar qualquer parte da li e não o span precisamente.

4
  • Sua pergunta está confusa, o draggable está no span ou no li?
    – BrTkCa
    Commented 29/01/2018 às 11:51
  • A função está no span, mas eu preciso que ela seja executada quando eu começar arrastar qualquer outra parte da li que não seja precisamente o span
    – Ian Ramos
    Commented 29/01/2018 às 11:54
  • Ian coloque tudo que vc tiver de código, ai fica mais fácil para te dar uma resposta precisa.
    – hugocsl
    Commented 29/01/2018 às 12:23
  • Porque não é colocado a classe atividade no li em vez do span?
    – GBTX
    Commented 29/01/2018 às 13:32

1 Resposta 1

0

Bom, pode ser utilizado a classe .parent do jquery segue código completo abaixo:

$(".atividade").parent(".list-group-item").draggable({
    appendTo: 'body',
    helper: "clone",
    opacity: .95,
    refreshPositions: true,
    revert: "invalid",
    revertDuration: 300,
    scroll: false
});
.atividade-style {
    cursor: pointer;
    background-color: #f0f0f0;
}

.atividade{

}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous"></script>

<ul class="list-group">

  <li class="atividade-style list-group-item">
    <span class="atividade">
      Item1
    </span>
    <div class="pull-right btn-group">
      <button class="fa fa-pencil-square-o excluir-atividae btnSemBorda"></button>
    </div>
  </li>

</ul>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .