12

Web ページに、互いに左右にドラッグできる 2 つのセクションを作成したいと考えています。

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

ただし、ヘッダー セクションを使用してドラッグできるようにしたいだけです。選択可能にしたいコンテンツがあります。

ヘッダーを介してドラッグできるようにするにはどうすればよいですか?コンテンツ領域のマウスイベントを通常どおり制御できますか?

4

1 に答える 1

22

handle次のようなオプションを使用します。

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

ここで実際の例を見ることができます：http：//jsfiddle.net/gTUSw/1/-完全なAPIドキュメントの豊富なオプションもここで見ることができます。

于 2013-03-11T14:13:24.707 に答える