5

Word ドキュメントを生成できるプロジェクトに取り組んでいます。機能の 1 つは、目次を定義することです。章を並べ替えるために、TOC を並べ替え可能な jQuery リストにしたいと考えています。

期待どおりに機能するMySQLテーブルからデータを再帰的に取得しています。IE7 (および可能性のある他のバージョン) にいくつかの奇妙な動作があることがわかったので、基本に戻って、DB によって生成された構造のない単純な HTML ファイルで次のことを試しました。

<!doctype html>
<html>
<head>
<script type="text/javascript" src="./jquery-1.3.2.js"></script>
<script type="text/javascript" src="./ui/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
  $(function() {
    $("ul.list").sortable({
      opacity: 0.7,
      helper: 'clone',
      cursor: 'move',
      tolerance: 'pointer'
    });
  $("ul.list").selectable();
  $("ul.list").disableSelection();
});
</script>
<style type="text/css">
ul.list {
  list-style:none;
  padding:none;
  margin:none;
  border:1px solid #EFEFEF;}
ul.list:hover {
  border:1px dotted #333;}
</style>
</head>
<body>
  <ul class="list">
    <li>Chapter 1</li>
    <li>Chapter 2
      <ul class="list">
        <li>Chapter 2.1</li>
        <li>Chapter 2.2</li>
      </ul>
    </li>
  </ul>
</body>
</html>

このソースでは (サブレベルの量に関係なく)、各サブチャプターがその親チャプター内の一意の並べ替え可能なリストであると期待しています。FireFox ではこれは正常に機能しますが、残念ながら、IE7 がデフォルトのブラウザーであり、切り替えることはできません。

何をすべきか提案はありますか？

基本的に、リストとネストされたリストを再編成したいだけです。現時点では、メインチャプターをドラッグすることしかできません。サブチャプターをドラッグしようとすると、対応する親からリスト構造全体がドラッグされます。したがって、'Chapter 2.2' をドラッグして 'Chapter 2.1' の上に配置しようとすると、実際には 'Chapter 2' をドラッグし、'Chapter 1' の上にドラッグする唯一の可能性があります。

私の質問が十分に明確であることを願っています。

これがデモです。/editURL に追加してコードを表示し、それを試してみます

4

1 に答える 1

18

これを追加するだけ

$('ul.list').bind('mousedown', function(e) {
  e.stopPropagation();
});

これにより、IE がmousedownイベントを親ulにバブリングするのを防ぎます。これにより、見た奇妙なソート可能な動作が発生します。これで期待どおりに動作するはずです

于 2009-11-24T12:28:34.097 に答える