How to change the containment of an object on load in jQuery

Question

I am currently trying to change the containment of jquery page items as a page loads. The current set up is that each of the items is associated with a class which then sets up the draggable properties of all the items.

Given particular actions, I need to be able to change the containment of particular bars to allow them to move inside different bounds than those initially set.

I've attached a jsFiddle (http://jsfiddle.net/cyVYq/28/) demonstrating what I am currently doing which for some reason will not break the original containment that has been set. Any help would be appreciated.

//find the elements that have changed on pback
var newlyConstrainedItems = $("[id*=container]");
$.each(newlyConstrainedItems, function (key, value) {
    var barID = this.id.split("_");
    $(barID[1]).draggable({
          containment: $("#" + this.id)
    });
});

Thanks

Answer 1

You forgot the hash symbol in your id selector:

var newlyConstrainedItems = $("[id*=container]");
$.each(newlyConstrainedItems, function (key, value) {
    var barID = this.id.split("_");
    $('#'+barID[1]).draggable({
          containment: $("#" + this.id)
    });
});