jquery ordinabili solo trascinando intestazione

Question

io voglio avere due sezioni sulla mia pagina web che possono essere trascinate a sinistra oa destra di ogni altro:

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

Questo è il lavoro qui: http://jsfiddle.net/gTUSw/

Tuttavia, solo io vuoi essere in grado di trascinare usando la sezione dell'intestazione. Ho dei contenuti che voglio essere selezionabili.

Come faccio a far funzionare tutto in modo da poter trascinare tramite l'intestazione, ma mantenere comunque il controllo normale sugli eventi del mouse nell'area del contenuto?

Answer 1

si desidera utilizzare l'opzione handle, come:

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

Si può vedere un esempio di lavoro qui: http://jsfiddle.net/gTUSw/1/ - è anche possibile vedere una vasta gamma di opzioni sulla documentazione API completa here.