How to drag an element when dragging the parent element?

Asked

Viewed 186 times

0

I have an ul with several li 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 (bootstrap class) li will always be larger than span, which has a draggable function. I need to get this function captured and start running when I drag any part of li and not span precisely.

javascript jquery front-end ui-draggable

  • Your question is confused, the draggable is in the span or in the li?

  • The function is in span, but I need it to run when I start dragging any other part of the read that is not precisely span

  • Ian put whatever you have of code, then it’s easier to give you an accurate answer.

  • Why is not placed the activity class in li instead of span?

1 answer

0


Well, the class can be used .Parent of 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>

<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>

Browser other questions tagged javascript jquery front-end ui-draggable

You are not signed in. Login or sign up in order to post.