Drag drop item list to build query

I'm trying to use this example, I can't understand how to update the fields and drag at the same time to a group, I believe that to do this drag and fill in the fields the list must also be part of the template / tree of "#builder" or I can clone the "#builder" and make a separate template / list and drag it from the "#builderList" clone to the "#builder", as you would do?

    var builder = $('#builder')[0].queryBuilder;
    var rule = builder.addRule(builder.getModel());
    rule.filter = builder.getFilterById('name');
    rule.operator = builder.getOperatorByType('equal'); // if you want
    rule.value = 'something'; // if you want

Thanks.

Start with the example shown in the issue and compare the #builder and proposed #builderList structures. Investigate how the query builder updates fields while rules are dragged into groups; done means a list item can be dragged into #builder and its fields can be populated as demonstrated by addRule, filter, operator, and value.