Aui event when a sortable list has been changed?

[Cameron McBride, geändert vor 12 Jahren.]

I have added a sortable list to a portlet, which is easy breezy with a few lines of code (below). What I would also like to know is when the order has been changed. Is there some other AUI event that I can listen for that will tell me if the order changes? If not that, then what about one to tell me when something has been drag-n-dropped.

I'm trying to wrap my head around aui but it is coming very slowly. Since there doesn't seem to be much information on aui I have started working through some YUI examples here http://yuilibrary.com/yui/docs/examples/. Except for AUI using "A" instead of a "Y", which is just cosmetic, they seem to be the same.

AUI().ready(
	'aui-sortable',
	function(A) {
		new A.Sortable(
			{
				nodes: '.results-row',
				constrain: {
					stickY: true
				}
			}
		);
	}
);

[Leo Pratlong, geändert vor 12 Jahren.]

Hi!

I find some events for The AUI Sortable:
containerChange
copy
handlesChange
idChange
invalidChange
moveTypeChange
nodesChange
opacityChange
opacityNodeChange

I don't know if there are more events, since, as you said, there is not a lot of documentation for AlloyUI .
Maybe "nodesChange" does what you need.

[Cameron McBride, geändert vor 12 Jahren.]

There is an alloy page detailing all of those methods here: http://alloy.liferay.com/deploy/api/Sortable.html. My problem is I don't know how to create the code to listen for one of those events. If I figure out how to write it for one event I can probably try all of them and see what they do.

[Leo Pratlong, geändert vor 12 Jahren.]

Try this:

AUI().ready(
    'aui-sortable',
    function(A) {
        new A.Sortable(
            {
                nodes: '.results-row',
                constrain: {
                    stickY: true
                },
                after: {
                    nodesChange: function() {
                         // YOUR CODE HERE
                    }
                }
            }
        );
    }
);

Not sure if it works. I can't try right now.

[Cameron McBride, geändert vor 12 Jahren.]

It did not seem to do anything. I also tried a few variations of that to see if I would have any luck.

				nodes: '.results-row',
				constrain: {
					stickY: true
				},
                on: {
                    nodesChange: function() {
                         alert("nodes");
                    }
                },
                after: {
                    containerChange: function() {
                         alert("container");
                    }
                },
                after: {
                    moveTypeChange: function() {
                         alert("moveType");
                    }
                }

[Cameron McBride, geändert vor 12 Jahren.]

I'm getting closer but still not there. The AlloyUI documentation for sortable makes it sound like the 'copy' event is what I need: http://deploy.alloyui.com/api/Plugin.Sortable.html
copy
copy ( event )
A Sortable node was moved.

This code will trigger when the node is clicked, but the copy event does not fire when you drag-n-drop:

AUI().use('event', 'node', function (A) {
    var clickedNode = A.one('#save-order-quicklink');
    
    var draggedNodes = A.all('.results-row');
    if (draggedNodes) {
    	draggedNodes.each( function(node) {
	    	node.on('click', function(eventFacade) {
	    		alert('click');
	    	});
	    	node.after('copy', function(eventFacade) {
	    		alert('copy');
	    	});
    	});
    }
});

[Cameron McBride, geändert vor 12 Jahren.]

I have gotten to work with some help from the YUI forums, an it ended up being super easy. The YUI3 Sortable has a "moved" event. The Alloy-UI lists a "copy" event which either doesn't work or I don't know how to use the alloy events.

AUI().ready(
	'aui-sortable',
	function(A) {
		var sortable = new A.Sortable(
			{
				nodes: '.results-row',
				constrain: {
					stickY: true
				}
			}
		);
		sortable.after('moved', function(e) {
			alert('moved!' + e.getValue());
		});
	}
);

[Piotr Swiniarski, geändert vor 9 Jahren.]

Hi guys, a bit late but recently i had to do same thing. It works for me:

<aui:script use="aui-base,sortable">
var container = A.one('#sortableList');

	if (container) { 
	var sortable = new A.Sortable(
		{
			container: container,
			nodes: '.results-row',
			opacity: '.4',
			on: {
				moved: function(event) {

				}
			}
		}
	);
	}
</aui:script>

[Piotr Swiniarski, geändert vor 9 Jahren.]

One more usefull example

<aui:script use="aui-base,dd-constrain,sortable">
var container = A.one('#sortableList');

	if (container) { 
	var sortable = new A.Sortable(
		{
			container: container,
			nodes: '.results-row',
			opacity: '.4'

		}
	);
	
	var sortableDD = sortable.delegate.dd;

		sortableDD.after(
			{
				'drag:end': function(event) { 
					updateOrderOfCategories();
				}
			});
	
	}
</aui:script>