CODEWITHSUNDEEP
jqueryjquery-ui
Jordash
Jordash

Reputation: 3103

jQuery UI Draggable Drags every Element within outer element

I have some basic HTML like this

<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
<ul>

I want to make the li tags draggable but in a different way then usual.

When someone drags any of the li tags I want it to also drag the li tags surrounding it on the same x axis.

NOTE: I can't drag the entire ul tag, I need to drag the individual li tags and all surrounding li tags within the ul tag.

Upvotes: 0

Views: 47

Answers (2)

Jordash
Jordash

Reputation: 3103

Moving each individual element proved to be way to much of a performance hit, so the way I solved it was by first wrapping a div around all of the elements:

$('li').wrapAll('<div class="draggableDiv"></div>');

If you're ul tag is set to overflow hidden and you need to keep that behavior (for a slider type application), this is the best way i've found to do it.

Upvotes: 0

Eshu
Eshu

Reputation: 359

I think my sample may solve your problem.Please check below link:

 $("#dragAbleElement").draggable({
    revert: "invalid", // when not dropped, the item will revert back to its initial position
    containment: $(".container"), // stick to demo-frame if present
    cursor: "move",
    start: function () {
        //code lines
    },
    stop: function(){
        //code lines
    }
});

Sample Code

Please let me know if you will face any issue.

Upvotes: 1

Related Questions