Used to give some height to the list, so that the item can be dragged back into it. This class is removed from a list when an item is dragged into a different list.ĭragging is in progress and the given list is either empty or contains only the dragged item. It also assumes the following classes dynamically: HTML classĭragging is enabled via the draggingEnabled attribute.ĭragging is in progress and the given list is either a source list or belongs to the same group as the source list.ĭragging is in progress and the placeholder is within the given list. Can be used for things like passing the parent of the list in for saving hasMany relationships.ĭrag-sort-list component has HTML class dragSortList. ⚠️ Has no effect on vertical lists.Ī catch-all for additional arguments you may want to access in the dragEndAction. ⚠️ Horizontal lists don't work well when nested. ⚠️ The handle element must have draggable="true" attribute.ĭisplays the list horizontally. When provided, items can only be dragged by handle. HTML class applied to list item components. Useful when dragEndAction is an async operation. Used to restrict dragging between multiple lists to only some of those lists. When not provided, the user is able to determine the order. When provided, used to determine the position of the placeholder when dragging a foreign item into the list. This callback will be called on source list when dragging is starting. This callback will be called on source list when sorting is complete. Here's the reference implementation of the dragEndAction action:Īctions: drag-sort-list arguments reference ArgumentĪn array of items to display and offer sorting. This is because the array has three items with indexes 0, 1 and 2, so putting an item to position 3 would make no sense. The initial index of c was 2, so you could suppose that target index after c is 3.īut targetIndex is calculated as if the dragged item b is not in the list. When sorting within one list, targetIndex assumes that the dragged item is not in the list.įor example, when your list is and you put b after c, sourceIndex will be 1 and targetIndex will be 2. The resulting index of the dragged item in the target list. The initial index of the item in the source list. The list where the sorting was initiated. Group provided to the drag-sort-list component. It's called with a single argument - an object with the following properties: Property It is called on the source list component when the drag'n'drop operation is complete. The component accepts a block representing an individual item (the block is rendered multiple times, one per list item). dragEndAction - a closure action that should update elements when sort is complete.Must be an Ember array (normally, all arrays in an Ember app are Ember arrays). The drag-sort-list component accepts two mandatory arguments: Install the addon: ember i ember-drag-sort If your webapp offers mobile experience, you must manually detect Chrome/Android and disable dragging. Currently, the addon behaves incorrectly on Chrome/Android. Chrome/Android: for some reason, does not fire the dragend event.Firefox/Android: does not support drag'n'drop.Safari/iOS: does not support drag'n'drop.If your app has jQuery removed, make sure you're using Ember newer than v3.10.0-beta.1, non-inclusive. ⚠️ Nested lists do not work correctly in Ember <= v3.10.0-beta.1 without jQuery. Version 3.x, gen-2 branch supports Ember CLI 3.12+.Except for page objects which still import jQuery in test env. Version 2.x, gen-1 branch (current development head) has got rid of jQuery.Version 1.x, gen-0 branch is based on jQuery.Disable sorting within a list while still allowing dragging in and out of the list (sort order is determined by host app instead of the user).On drag end, calls an action for you to handle list mutation. Strict DDAU: does not mutate the lists while dragging.It is important that you use ember.js and ember-drag-sort tags for your question to be seen. If you're having trouble using this addon in your project, please file a properly structured question at StackOverflow. But first make sure there's no similar issue. In case you have something to suggest or report, please file an issue to the issue queue. Sorting the dragSortList page object componentīug reports and feature requests are very welcome.Extending the dragSortItem page object component.Extending the dragSortList page object component.Including page object components into your page objects.Defined in packages/ember-glimmer/lib/helpers/action.
0 Comments
Leave a Reply. |