Foros de discusión
Aui event when a sortable list has been changed?
Cameron McBride, modificado hace 12 años.
Aui event when a sortable list has been changed?
Expert Mensajes: 269 Fecha de incorporación: 8/02/11 Mensajes recientes
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.
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, modificado hace 12 años.
RE: Aui event when a sortable list has been changed?
Expert Mensajes: 363 Fecha de incorporación: 6/07/10 Mensajes recientes
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.
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, modificado hace 12 años.
RE: Aui event when a sortable list has been changed?
Expert Mensajes: 269 Fecha de incorporación: 8/02/11 Mensajes recientes
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, modificado hace 12 años.
RE: Aui event when a sortable list has been changed?
Expert Mensajes: 363 Fecha de incorporación: 6/07/10 Mensajes recientes
Try this:
Not sure if it works. I can't try right now.
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, modificado hace 12 años.
RE: Aui event when a sortable list has been changed?
Expert Mensajes: 269 Fecha de incorporación: 8/02/11 Mensajes recientes
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, modificado hace 12 años.
RE: Aui event when a sortable list has been changed?
Expert Mensajes: 269 Fecha de incorporación: 8/02/11 Mensajes recientes
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:
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, modificado hace 12 años.
RE: Aui event when a sortable list has been changed?
Expert Mensajes: 269 Fecha de incorporación: 8/02/11 Mensajes recientes
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, modificado hace 9 años.
RE: Aui event when a sortable list has been changed?
New Member Mensajes: 12 Fecha de incorporación: 21/11/10 Mensajes recientes
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, modificado hace 9 años.
RE: Aui event when a sortable list has been changed?
New Member Mensajes: 12 Fecha de incorporación: 21/11/10 Mensajes recientes
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>