How do I drag an element when dragging the parent element?

Navigation
0

I have an ul with several li's inside, and each li has a 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
});

Note that because of the "list-group-item" class the li will always have a size larger than the span, which has a draggable function. I need to make this function be captured and start running when I drag any part of the li and not the span precisely.

    
asked by anonymous 29.01.2018 / 12:47

1 answer

0

Well, you can use the .parent class from jquery follows full code below: 

$(".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><scriptsrc="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>
    
29.01.2018 / 14:42
How to create method to start a report - java Why is it impossible to use OpenGL in Qt 5?