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/ - 您还可以在完整的api文档here上看到大量选项。

jquery只能通过拖动标题进行排序

1 个答案: