JQuery сортируется только путем перетаскивания заголовка

Question

Я хочу иметь две секции на моей странице, которая может быть втянута влево или вправо друг от друга:

<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> 

Это работает здесь: http://jsfiddle.net/gTUSw/

Однако, только я хотите перетащить, используя раздел заголовка. У меня есть контент, который я хочу выбрать.

Как заставить это работать, чтобы я мог перетаскивать его через заголовок, но все еще имеет нормальный контроль над событиями мыши в области содержимого?

Answer 1

Вы хотите использовать опцию handle, как:

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

Вы можете увидеть рабочий пример здесь: http://jsfiddle.net/gTUSw/1/ - вы также можете увидеть множество вариантов на полной апи документации here.