Forums

Hello everyone,

I have a nice web application running with some drag and drop functionality just like the drag&drop example with scrolling http://yuilibrary.com/yui/docs/dd/scroll-list.html.
However, my website may change the content of both the <ul> (list1 and list2).

How should I approach this?
1. call a function to add a function to create the new li and make it draggable with something like:

Which doesn't work obviously otherwise I wouldn't ask here

2. recall the complete yui script everytime I change the content.


I use to have yui 2 running and had the 1st approach adding these lines was enough:



Please help me, I would like to have all elements draggable each time I refresh the content of my ul's

Thanks in advance.
Karsten

Ah thanks!

That's working.

I fitted in:
YUI().use('dd-delegate', function(Y) {
var del = new Y.DD.Delegate({
container: '#play',
nodes: 'li'
});
});

but now I see it lost my drop targets (over different UL's)

I discovered I need to use
delegate.syncTargets();
to sync my drop targets again - all my drop targets are set in the main YUI as ...
var uls = Y.all('#play ul');
uls.each(function(v, k) {
var tar = new Y.DD.Drop({
node: v
});
});

I have tried to use
delegate.syncTargets();
in the code above but I can't seem to get it work...

please help!

I'm sorry, I am totally lost.
I thought I had to create a second instance, but appearently the performance goes down drammatically because of the two instances coming into conflict or loop or something.

so I need it all to go into one instance and with the
Y.one('#make') (but not Click) I can call the function to make the li draggable again like the others?
with the following function I'm writing my li with content:

function appendOptionLast(text,id,ul){
var list = document.getElementById(ul);
var newNode = document.createElement("li");
newNode.setAttribute('id',id);
newNode.innerHTML = text;
list.appendChild(newNode);}



What do I have to append above to make the li draggable again??

The examples on the website doesn't show me what to do with two ul's AND delegate AND proxy AND sorting with scrolling.

Here's my YUI code which is basically the example from the website...

http://pastie.org/3383717

the only thing I want is refreshing the content of my ul1 and ul2 dynamically (which the site already does - it is creating new li's but I still need to be able to drag and drop on ul1 and ul2 with be able to sorting and scrolling staying in tact.

however the new created li's can't be dragged anymore

I have puzzled for hours but can't make it work together

can you please have a look?

Thanks a lot.

you haven't given up on me I hope......

here's the exact problem:
http://jsfiddle.net/double0seven/5uSrq/5/

add 5 new items and see they're not drop targets anymore...
what am I doing wrong here?

Thanks for checking.
I use normal IE9.

Steps to reproduce:
1. add 3 new items
2. move item 6 between 4 and 5


Problem statement: new items are not drop targets themselves...

and even worse:
When you start with an empty list (like I do in my application - it clears the list first) then you won't be able to sort that list at all anymore.
See: http://jsfiddle.net/double0seven/5uSrq/7/