jquery sortable only by dragging header

Question

I want to have two sections on my webpage which can be dragged left or right of each other:

<style>
#sortableitem {
    width: 100px;
    height: 70px;
    float:left;
    list-style-type: none;
}
.content {
    background:lightgrey;
}
.header {
    background:grey;
}
<style>

<ul id='sortable'>
<li id='sortableitem'>
    <div class='header'>ITEM 1</div>
    <div class='content'>Content here</div>
</li>
<li id='sortableitem'>
    <div class='header'>ITEM 2</div>
    <div class='content'>Content here</div>
</li>
</ul>

<script>
$(document).ready(function () {
    $("#sortable").sortable();
});
</script>

This is working here: http://jsfiddle.net/gTUSw/

However, I only want to be able to drag using the header section. I have content which I want to be selectable.

How do I get this to work so that I can drag via the header, but still have normal control over mouse events in the content area ?

Answer 1

You want to use the handle option, like:

$("#sortable").sortable({ handle: ".header" });

You can see a working example here: http://jsfiddle.net/gTUSw/1/ - you can also see a wealth of options on the full api documentation here.