Question

I have this working however I cant get it to work within my existing code.

What I need to happen is: http://jsfiddle.net/uJcB7/176/

So when I add features from the checkbox into the div it puts them in a list. I have each function working but can not figure out how to combine the two.

So that when you add in the features from the checkbox into the div, it adds the string of features as a list which I can the drag around.

Cheers

Answer 1

I guess the easiest way to answer is with a demonstration?

jsFiddle demo

Hopefully this is what you’re after, I’ll break down the code for you.

First I merged your document ready function calls, and collapsed any jQuery statements that were using the same selectors at the appropriate time. This resulted in the initialisation code, which is:

$(function() {

    $("#sortable").sortable().disableSelection();
    $('#cblistp input').click(additionalFeatures);

    additionalFeatures();
});

Then I collapsed the original allVals array and replaced it with jQuery’s map function. The map function is essentially the each function, with the added bonus of the result being an array of any elements that are returned. Within the map function we’re simply returning the .value of all selected HTML inputs 1-by-1. I’m then join‘ing them with a slightly nicer , join. This gives us:

// add additional features
function additionalFeatures() {   
    // map the selected items
    var text = $.map($('#cblistp :checked'), function(input) {
        return input.value;
    }).join(', ');

    $('#additionalFitFeatures').text(text);
};

​In addition to this, as previously mentioned, the map function acts similar to the each function. This allows us to construct a new sortable list at the same time as selecting the text to display in the div. First we need to clear out the old sortable, then we’ll add the selected items, and finally we’ll construct a new sortable. This gives us the following:

// add additional features
function additionalFeatures() {
    // clear out the old sortable
    var sortableList = $('#sortable').sortable('destroy').find('li').remove().end();

    // map the selected items
    var text = $.map($('#cblistp :checked'), function(input) {
        sortableList.append('<li>' + input.value + '</li>');            
        return input.value;
    }).join(', ');

    $('#additionalFitFeatures').text(text);
    sortableList.sortable();
};