仅通过拖动标题实现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/

然而，我只想通过标题栏拖动。我有一些需要被选中的内容。

我该如何使拖动通过标题栏进行，但仍能在内容区域正常控制鼠标事件？

- SteveP

Answer 1

你想使用handle选项，像这样：

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

你可以在这里看到一个工作示例：http://jsfiddle.net/gTUSw/1/ - 你也可以在完整的API文档这里看到很多选项。

- Prisoner

---

我简直不敢相信我错过了那个。谢谢你的回复。 - SteveP

您先生是一位绅士和高级学者。我也遇到了同样的问题，这个解决方案非常有效。 - user1065669