Hi,

I'm trying to copy elements WITH IT'S EVENTS from one unordered list to another, but the events are not carried with the html elements.
I'm using an Aslam Bari's component, which implements a drag & drop functionality using two unordered lists.  The component is published here: http://techsahre.blogspot.com.uy/2011/05/salesforce-drag-drop-multiselect-list.html, for anyone to use.

So, i'm dragging elements from "list_1" to "list_2", then I do whatever I want with the dragged components in "list_2", then I want these dragged elements to come back to "list_1" with its events, and I'm not being able to accomplish this.

In my VF Page I use the component like these:

 <c:SFDragDropList list1="{!sourceItems}" outputfieldid="list_2_serialised"/>

The component itself:

<apex:component controller="SFDragDropListController">
    
    <apex:attribute name="list1" description="values for list one" type="string" assignTo="{!list1}" required="true"/>
    <apex:attribute name="list2" description="values for list two" type="string" assignTo="{!list2}"/>
    <apex:attribute name="outputFieldId" description="values which is stored in target list, fill in given textbox" type="string" assignTo="{!outputFieldId}" required="true"/>
    <c:BaseDragDropComponent />
    
    <script>
    $(function(){
        var js = jQuery.noConflict();
        
        mychange = function ( $list ){
            var js = jQuery.noConflict();
            js('#{!outputFieldId}').val(js.dds.serialize('list_2'));
        }
        js('ul').drag_drop_selectable({
            onListChange:mychange
        });
        js('#{!outputFieldId}').val(js.dds.serialize('list_2'));
    });
    </script>
    
    <div class='panel'>
        <h2>Available Tests</h2>
        <ul id="list_1">
            <apex:repeat value="{!list1Items}" var="item">
                <li id="{!item}">{!item}</li>
            </apex:repeat>
        </ul>
    </div>
    
    <div class='panel'>
        <h2>Tests to execute</h2>
        <ul id="list_2">
            <apex:repeat value="{!list2Items}" var="item">
                <li id="{!item}">{!item}</li>
            </apex:repeat>
        </ul>
    </div>
</apex:component>

In plain HTML the VF Page it looks like this:



As we can see in the image (and I checked it of course), the dragged elements in "list_2"  still have the events attached.

So, after using them, I want these elements back in "list_1" with its events, so I go like this:

$('#list_2').children().each(function()
                                         {
                                             //clone elements with events and append them to the first list
                                             $(this).clone(true,true).appendTo('#list_1');
                                             //remove element from list_2
                                             $(this).remove();
                                         });

But then, when copied to "list_1" the events aren't there anymore. I also tried with clone(true), and there is a plugin "CopyEvents" in jQuery which didn't work.

Can anyone lend me a hand here? I've been struggling with this for three days now, it's so frustrating.

Thanks in advance!
Greetings,
Franco Priggione.

Hi,

We have an Apex Component(has one Controller attached to it) included in the Visualforce page. We want to get it refreshed when one User lookup is populated on the Visualforce Page. Please suggest if there is a way to accomplish this.

We had tried page reload. But that leads to Data being blanked out on the page. Is there any clean way to do it?