jQuery UI accordion

https://groups.google.com/d/topic/knockoutjs/h97sy04PK10/discussion

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<div class="container"> 
<svg width="800" height="500">
        <rect class="draggable" x="1" y="1" width="200" height="200" style="fill:DeepPink;fill-opacity:0.1;stroke-opacity:0.9" />
        <rect class="draggable" x="201" y="1" width="200" height="200" style="fill:blue;fill-opacity:0.1;stroke-opacity:0.9" />
        <rect class="draggable" x="1" y="201" width="200" height="200" style="fill:red;fill-opacity:0.1;stroke-opacity:0.9" />
        <rect class="draggable" x="201" y="201" width="200" height="200" style="fill:purple;fill-opacity:0.1;stroke-opacity:0.9" />
        </svg>
</div>

CSS

.container {
    position: absolute;
    left: 100px;
}

JavaScript

$('.draggable')
            .draggable()
            .bind('mousedown', function(event, ui) {
                // bring target to front
                $(event.target.parentElement).append(event.target);
            })
            .bind('drag', function(event, ui) {
                // update coordinates manually, since top/left style props don't work on SVG
                event.target.setAttribute('x', ui.position.left);
                event.target.setAttribute('y', ui.position.top);
            });