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 ?

score 23 · Accepted Answer · answered Mar 11 '13 at 14:13

23

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.

answered Mar 11 '13 at 14:13

Prisoner

27,391
11
73
102

I can't believe I missed that. Thanks for the reply. – SteveP Mar 11 '13 at 14:21
You sir are a gentleman and a high-profile scholar. I had the same problem and this solution worked like a charm. – Jun 11 '13 at 10:59

jquery sortable only by dragging header

1 Answers1