Skip to main content

Search and Top Navigation

#10579 open feature ()

Opened September 01, 2014 10:01AM UTC

Last modified September 02, 2014 12:59PM UTC

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

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 http://css-tricks.com/draggable-elements-push-others-way/ 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

 $(selector).sortable({
  placeholder: {
    element: function(currentItem) {
    },
    uponInsertion: function(currentItem,options) {
             animate()
    },
    update: function(container,p) {
    },
    beforeRemoval: function(currentItem,options) {
             animate(// remove it here) 
    },
  }
 });

as an improvement to this http://bugs.jqueryui.com/ticket/7121 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.

Attachments (0)
Change History (1)

Changed September 02, 2014 12:59PM UTC by tj.vantoll comment:1

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.