Opened 8 years ago

Last modified 8 years ago

#10579 open feature

Sortable: Provide way to animate placeholder appearance and disappearence

Reported by: tj Owned by:
Priority: minor Milestone: none
Component: ui.sortable Version: 1.11.1
Keywords: Cc:
Blocked by: Blocking:


It'd be great to have an option to animate the appearance and disappearing of the placeholder.

Currently one possible way is to overlap cloned elements and animate them while original elements are hidden as described in the CSStricks blog post which is hectic and really isn't a neat way to do it.

The major issue being the placeholder being removed immediately from DOM as mentioned in the post.

It'd be great to have options to animate the placeholder after it is inserted and before it is removed so that users can create visually appealing applications.

I'd think of something like

  placeholder: {
    element: function(currentItem) {
    uponInsertion: function(currentItem,options) {
    update: function(container,p) {
    beforeRemoval: function(currentItem,options) {
             animate(// remove it here) 

as an improvement to this ticket,

or events such as beforePlaceholderInsertion inside will i'll have access to the element which is about to be inserted whose styles i can modify in order to animate after insertion.

afterPlaceholderInsertion where i can apply the animation effects or do something else useful (not sure if the change event is the same as this, since it only says "This event is triggered during sorting, but only when the DOM position has changed".)

beforePlaceholderRemoval where i can shrink or flip the place holder before removing it from dom.

Change History (1)

comment:1 Changed 8 years ago by tj.vantoll

Status: newopen
Summary: Provide option to animate placeholder appearance and disappearenceSortable: Provide way to animate placeholder appearance and disappearence

I doubt we'd add an option, but I think moving the creation and removal of the placeholder into extension points would be reasonable.

Note: See TracTickets for help on using tickets.