Change items style when moving elements in jquery-ui sortable
Legionar
I have two columns, that are jquery-ui sortable. In the left column are choosen items, in the right are all not choosen. You can move items (li elements) between both. Each element can be either in the left one or in the right column. The first element in the left column (choosen) is not sortable and cant be moved (name ID). Elements in the left column have different style as elements in the right column, also in the left column each li element is on self line, but in the right column they are floated.
Here is an image of that:
Everything is working fine, but when user is moving element between columns, I need the element change its style (while is moving = left mouse button is down), when is over left or right column. By changing its style I mean, when f.e. I start to move element Telefón from left to right, when I will be over right column, this element should change its background color to gray and display not in the whole line, but only in its width and ad versa.
I cant figure out, how this can be done. Thanks.
Crepi
You can add this to your sortable options:
over: function (event, ui) {
if ($(ui.item).closest("ul").hasClass("interested")) {
$(ui.item).detach().appendTo("#categories-source");
$(ui.item).css("width", "initial");
} else {
$(ui.item).detach().appendTo("#categories-chosen");
$(ui.item).css("width", "210px");
$(ui.item).css("height", "initial");
}
}
It puts dragged element in proper ul depending if previous one had class interested.
Update
Also set proper dimensions to the dragged element (because left list is one per line).
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: Cookie changes made in EndRequest are not sent in Response
- Next: C# action on specific date and time
Related
Related Related
- 1
jQuery UI Sortable and moving elements between lists
- 2
Sortable items and subitems in list on jQuery ui sortable
- 3
jQuery UI .sortable() call is slow when applies to thousands of elements
- 4
jQuery UI .sortable() call is slow when applies to thousands of elements
- 5
Removing Items from Jquery UI Sortable
- 6
jQuery UI sortable for dynamically added items
- 7
jquery change class when sortable
- 8
jquery ui draggable sortable elements into an iframe
- 9
jquery ui draggable sortable elements into an iframe
- 10
Manually updating jquery ui sortable elements
- 11
Why is jQuery UI Sortable not reordering the elements anymore?
- 12
jQuery UI Sortable Triggered when an Items are re-arranged or moved in between lists
- 13
How to change what jquery ui sortable return?
- 14
jquery-ui sortable - moving tasks between lists
- 15
jQuery UI sortable handles not moving item before 50%
- 16
jQuery UI Sortable Ignoring items that doesn't match items selector
- 17
jQuery UI Sortable Ignoring items that doesn't match items selector
- 18
How to make a sortable behave like a droppable when moving other sortable items over it
- 19
jQuery UI .sortable .on click move items and also keep sorting functionality
- 20
jQuery UI sortable: how to leave css values of changed items untouched?
- 21
Jquery UI Sortable - Child element moves parent items
- 22
Only enable jQuery UI sortable for items that contain a known child
- 23
jQuery UI Sortable: possible to sort on <button> sub-elements
- 24
How to mix JQuery UI's draggable and sortable with div elements?
- 25
jQuery UI sortable's placeholder pushes elements under it
- 26
jquery ui - sortable: get new position of all elements
- 27
jQuery UI sortable's placeholder pushes elements under it
- 28
JQuery sortable with centered elements?
- 29
jQuery sortable on dynamic elements
Comments