jquery sortable tylko przeciągając nagłówek

Question

Chcę mieć dwie sekcje na mojej stronie internetowej, które można przeciągać w lewo lub w prawo od siebie:

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

ten pracuje tutaj: http://jsfiddle.net/gTUSw/

Jednak tylko chcesz mieć możliwość przeciągania za pomocą sekcji nagłówka. Mam treść, którą chcę wybrać.

Jak to zrobić, aby móc przeciągać za pośrednictwem nagłówka, ale nadal mam normalną kontrolę nad zdarzeniami myszy w obszarze zawartości?

Answer 1

Chcesz skorzystać z opcji handle, jak:

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

widać działający przykład tutaj: http://jsfiddle.net/gTUSw/1/ - można również zobaczyć wiele opcji na pełnej dokumentacji API here.