Cannot create droppable container dynamically

[tempmegit]

Hi, I would create containers dynamically, but only the first works,

Please check the example: http://jsfiddle.net/w8jz1hqj/1/

Drop more than one "container" and then try to drop items in these containers that were created dynamically. You'll notice that only the first dropped container works properly.

So, what can I do?

[plasid]

I looked at the javascript error in the developer console and noted that you are getting the same 'group' error as me, it relates to the version. See my posted issue #189

[prespic]

I'm also dynamically adding containers. I found, the problem is that jquery-sortable is discovering all containers just once, when they are first time used (hovering or placing item). Don't know if its the same problem you have. My solution is, when i create new container, I get the options from existing panel:

var options = $('#root).data('sortable');

and then destroy the sortable and create again:

$('#root').sortable('destroy').sortable(options);

[toluol]

@prespic : Hi ! When I get the options from existing panel as you did and apply it with "sortable(options)", it doesn't work and blocks javascript. If I use "sortable({options})", it works partially. But the main options (as "onDrop" that I use with ajax) don't work anymore. Have you never had that problem ?

[prespic]

Hello, @toluol I had no issues like you. this two rows are all i do. For me it's working fine including all the methods, like onDrop, onDragStart, etc... Try to watch console, or debug step by step, if there is no error. There is how i define these methods.

    public execute(triggerData: Core.WorkItems.TriggerData)
    {
        this.getPanelDesigner().getElement().find('.root').sortable(<JQuerySortable.OptionsEx>{
            id: 'Designer',
            group: 'workflowGroup',
            handle: '.panel-heading, .activity',
            exclude: '.root',
            delay: 50,
            placeholder: '<li class="actualPLaceholder"></li>',
            containerSelector: 'div.container',
            pullPlaceholder: false,
            itemPath: '> ol',
            afterMove: this.afterMove.bind(this),
            onDrop: this.onDrop.bind(this),
            onDragStart: this.dragStart.bind(this),
            isValidTarget: this.isValidTarget
        });

        this.getToolBox().getElement().sortable(<JQuerySortable.OptionsEx>{
            id: 'Toolbox',
            group: 'workflowGroup',
            containerSelector: 'ol, ul',
            itemPath: '',
            drop: true
        });

There si how i refresh the sortable:

    private newContainer()
    {
        var options = this.getElement().closest('.root').data('sortable').options;
        this.getElement().closest('.root').sortable('destroy').sortable(options);
    }

[toluol]

Thank you for your answer. Well, you declare the plugin and functions differently that I do. And... you do things I don't understand (certainly my misunderstandings of javascript ! ^^) I will study your code more closely and this line above all : "this.getToolBox().getElement().sortable(< JQuerySortable.OptionsEx "

Another question : I'm new on Github and I don't understand how you style your comments here and put code in highlight. You do a bbcode like : [code]//javascript code...[/code] ?