IE8のJQuery UI:並べ替え可能でサイズ変更可能な要素のサイズ変更中に並べ替え動作を一時停止する

StackOverflow https://stackoverflow.com/questions/1105514

質問

Jquery UIを使用して並べ替え可能およびサイズ変更可能にしたい要素のリストがあります。これらを組み合わせると、Chrome と Firefox でうまく機能します。ただし、IE8 (通常ビューと互換ビューの両方) では、どちらの動作も個別に使用するとうまく機能しますが、組み合わせると、混合動作が発生して望ましくないものになります。

私の期待は、サイズ変更可能なハンドルをドラッグして要素のサイズを変更すると、 ない また、並べ替え可能な動作を有効にして、その要素を移動します。残念ながら、要素のサイズ変更領域をドラッグすると、並べ替え位置を移動しているかのように要素もドラッグされます。2 つの動作を排他的にしたいと考えています。動作を再現するコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.resizable.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.sortable.js"></script>

  <style type="text/css">
    .item { width: 200px; height: 20px; border: 1px solid gray; float: left; }
  </style>
  <script type="text/javascript">
  $(document).ready(function(){

    $(".item").resizable({
      start:function() {
        $("#wrapper").sortable("disable");
      },
      stop:function() {
        $("#wrapper").sortable("enable");
      }
    });
    $("#wrapper").sortable({
      items:".item"
    });
  });
  </script>
</head>
<body>
  <div id="wrapper">
    <div class="item">a</div><div class="item">b</div><div class="item">c</div><div class="item">d</div>
  </div>
</body>
</html>

これに対処するために、次のようないくつかの戦略を試しました。

  1. 上記のアプローチでは、サイズ変更の開始時に並べ替え可能を無効にしようとします。残念ながら、これはまったく効果がありません。
  2. サイズ変更可能な開始関数で項目にクラスを追加し、そのクラスで並べ替え可能なフィルターを使用します (例:$("#wrapper").sortable({items:".item:not(.resizing)"});$("#wrapper").sortable({items:".item", cancel:".resizing"});)
  3. ソート可能およびサイズ変更可能に使用されるセレクターに関するいくつかのバリエーション
  4. 徹底的にグーグル検索し、机に頭を打ち付け、マイクロソフトの一般的な方向性についてつぶやきました。

ご協力をよろしくお願いいたします。

役に立ちましたか？

解決

私は、ソート可能なハンドルを指定し、DIV内のスパンを含むことにより、この問題を回避働きました。

デモここを。

これは、残念ながら全体の要素がないの並べ替えで行うことが可能であることを意味していますが、ハンドルの寸法と遊ぶと妥協をうまくすることができます！

他のヒント

私は同じようなことに取り組んでいる、これは私は以下のことをしたかです。ソートのためのハンドルを指定すると、トリックを行うようです。

あなたは、CSSを変更するとJavaScriptものがどのようにセットアップご使用の環境に合わせて必要になる場合があります。

<!doctype html>
<html lang="en">
<head>
    <title>jQuery UI Resizable - Default functionality</title>
    <link type="text/css" href="/jquery/css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="/jquery/js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="/jquery/js/jquery-ui-1.7.2.custom.min.js"></script>
    <style type="text/css">
        #draggable { border:solid 1px black; width: 75px; height: 150px; padding: 0.5em; }
        #resizable { border:solid 1px black; width: 75px; height: 150px; padding: 0.5em; }
        #resizable h3 { text-align: center; margin: 0; }
        #sortable { list-style-type: none; margin: 0; padding: 0; }
        #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; width: 100px; background-color:#CCC;border:solid 1px black;}
        </style>
        <script type="text/javascript">
        $(function(){$("#sortable").sortable({handle: 'span'});});
        $(function(){$("#item1").resizable();});
        $(function(){$("#item2").resizable();});
        $(function(){$("#item3").resizable();});
        </script>
    </head>
    <body>
    <div>
        <ul id="sortable">
            <li id="item1" class="ui-state-default"><span>Item 1</span></li>
            <li id="item2" class="ui-state-default"><span>Item 2</span></li>
            <li id="item3" class="ui-state-default"><span>Item 3</span></li>
        </ul>
    </div>
</body>
</html>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top