jquery sortierbar nur durch Kopf Ziehen

Question

ich zwei Abschnitte auf meiner Webseite haben wollen, die Maus nach links gezogen werden kann oder rechts voneinander:

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

Dies funktioniert hier: http://jsfiddle.net/gTUSw/

Allerdings habe ich nur möchte in der Lage sein, mit dem Header-Bereich ziehen zu können. Ich habe Inhalte, die ich auswählen möchte.

Wie bekomme ich dies so zu arbeiten, dass ich über den Kopf ziehen, aber immer noch die normale Steuerung über Maus-Ereignisse im Inhaltsbereich?

Answer 1

Sie wollen die handle Option verwenden, wie:

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

Sie hier ein funktionierendes Beispiel sehen kann: http://jsfiddle.net/gTUSw/1/ - Sie können auch eine Fülle von Optionen auf die volle api Dokumentation here sehen.