留言板
Aui event when a sortable list has been changed?
Cameron McBride,修改在12 年前。
Aui event when a sortable list has been changed?
Expert 帖子: 269 加入日期: 11-2-8 最近的帖子
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,修改在12 年前。
RE: Aui event when a sortable list has been changed?
Expert 帖子: 363 加入日期: 10-7-6 最近的帖子
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,修改在12 年前。
RE: Aui event when a sortable list has been changed?
Expert 帖子: 269 加入日期: 11-2-8 最近的帖子
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,修改在12 年前。
RE: Aui event when a sortable list has been changed?
Expert 帖子: 363 加入日期: 10-7-6 最近的帖子
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,修改在12 年前。
RE: Aui event when a sortable list has been changed?
Expert 帖子: 269 加入日期: 11-2-8 最近的帖子
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,修改在12 年前。
RE: Aui event when a sortable list has been changed?
Expert 帖子: 269 加入日期: 11-2-8 最近的帖子
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,修改在12 年前。
RE: Aui event when a sortable list has been changed?
Expert 帖子: 269 加入日期: 11-2-8 最近的帖子
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,修改在9 年前。
RE: Aui event when a sortable list has been changed?
New Member 帖子: 12 加入日期: 10-11-21 最近的帖子
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,修改在9 年前。
RE: Aui event when a sortable list has been changed?
New Member 帖子: 12 加入日期: 10-11-21 最近的帖子
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>