3

IE 9 および 10 で .draggable を機能させるのに問題があります。使用される主な JavaScript パッケージは次のとおりです: jquery-ui-1.9.1.min.js および jquery-1.8.2.min.js

コードは基本的に次のようになります。

creation.texts.resize = function(){

  jQuery('.modification-text.active .creation-resize-handler').draggable({
    start: function(event, ui){
      ... some code ...
    },
    drag: function(event, ui){
      ... lots of code ...
    },
    stop: function(event, ui){

       ... some code ...

      creation.texts.resize();
    }
  });
}

Chrome Firefox などで問題なく動作します。似たような問題に遭遇した人はいますか?

更新: jsfiddle.net で小さなサンプル コードを試してみましたが、正常に動作します。コードはかなり巨大です。他の問題があるに違いありません。

更新 2:ドラッグ可能な要素をクリックできないようです: 同じページでいくつかの個別のテストを行ったところ、.draggable を問題なく使用できました。障害のある要素に onclick アラートを追加しましたが、IE ではトリガーされません。その領域の要素のサンプル HTML コードを次に示します。

<div id="modification-limit" style="left: 25px; top: 34.5px; width: 290px; height: 290px;">
  <div class="modification-text text-active active first-text ui-draggable" id="text_1" style="left: 97px; top: 24px; z-index: 0; border: 1px dashed rgb(204, 204, 204);">
    <img src="/images/creation/rotate.png" class="creation-rotate" style="display: block;">
    <div class="creation-rotate-handler ui-draggable" style="display: block;"></div>
    <img src="/images/creation/resize.png" style="z-index: 100; display: block;" class="creation-resize">     
    <div class="creation-resize-handler ui-draggable" style="z-index: 50000; display: block;" onclick="alert('clicked');">
    </div><img src="/images/creation/close.png" class="creation-close-text" style="display: block;">
    <div> ... </div>
  </div>
</div>

簡単にするために、多くの html を削除しました (多くの 'data-..')。うまくいけば、問題は私が削除したコードの一部ではありません.

4

5 に答える 5

5

JQuery 1.8.3およびJQuery UI 1.9.2でIE10を使用して、同じ問題を抱えています

(JSON Web サービスから読み込んだデータに基づいて) 実行時にいくつかの div コントロールを作成し、JQuery UI を使用してドラッグ可能として設定します。しかし、IE9 と IE10 では、ドラッグする必要があることさえ登録しません。

たとえば、ユーザーがカーソルを合わせると、カーソルを「移動」カーソルに変更します。

newDivElement.draggable({
   cursor: "move",
   drag: function (event, ui) {
       alert("Hey !  You're dragging !");
   }
   . . . 
});

決まり文句を言いますが、Chrome、Firefox、または Google Chrome Frame を使用した IE8 で正常に動作します。

しかし、IE9 または IE10 では、ユーザーがこれらの div にカーソルを合わせても何も起こりません。カーソルは変化せず、ドラッグ機能は開始されません。

興味/絶望から、私は他の場所からの提案を試み、div と div の周りの他の HTML 要素で -ms-touch-action css を「none」に設定しました。

違いはありませんでした。

    $(".cssWorkflowStep").css('-ms-touch-action', 'none');
    $(".cssCanvas").css('-ms-touch-action', 'none');
    $(".ui-draggable").css('-ms-touch-action', 'none');
    $("#divCanvasWrapper").css('-ms-touch-action', 'none');
    $("#divWorkflowDiagram").css('-ms-touch-action', 'none');

また、Chrome の [Inspect Element] メニュー項目を使用して、新しい divがこれらの新しい-ms-touch-action値を取得していることを確認し、それらが取得されていることを示しました (しかし、Chrome はこの css 名を削除していました。それが何であったかを知っています）。

私は良い一日を過ごしていません...

次のページで解決策を見つけました。

IE10 はクリック イベントを処理していません | MSPointer の使用に関するヘルプ

（気を引き締めてください..これはばかげています。）

div の背景色を白に設定する必要がありました...次に、この背景色を非表示にしました。次に、IE9 と IE10 では、画面上でdivをクリックまたはドラッグできます。

background-color:#FFFFFF; opacity:0;

誰かが私を必要としているなら、私はバーにいて泣きます。

于 2013-04-09T13:25:13.817 に答える
0

選択範囲にカンマがないようですが、これを試しましたか？

jQuery（'。modification-text.active、.creation-resize-handler'）。draggable（）.. ..

于 2013-02-15T21:27:58.577 に答える