1

jquery ドラッグ可能な div を含むアプリケーションがあります。ユーザーからの入力を取得するために、ドラッグ可能な div 内に 4 つのテキスト フィールドを配置しました。

Aspx:

    <div id="divAdd" runat="server">
    <input id="txtCode" placeholder="Location Code" maxlength="20" 
    type="text" runat="server" />
    <input id="txtName" placeholder="Location Code" maxlength="20" 
    type="text" runat="server" />
    ...
    </div>
    <div>

Javascript:

 $("#divAdd").draggable({ cursor: 'move', containment: '#divmap',
                drag: function () {
                    fnHandleMove();
                }
            });

カーソルをタップしても、IPADのテキストフィールドにカーソルを置くことができません。ただし、デスクトップ版は正常に動作します。

そのJavaScript部分をコメントアウトすると、カーソルとキーパッドのショーを配置できます。

jquery UI-draggable のこのバグですか、それとも何か間違っていますか?

JqueryUI.js とは別に、アプリケーションで JqueryTouchPunch.js と JSPlumb.js を使用します。

どんな助けでも大歓迎です。

4

2 に答える 2

4

HTML要素が何であれ、textfieldフォーカス、スクロール、単語の選択、テキストの周りのテキストカーソルの移動、およびさまざまなシナリオが発生する可能性がある場合は、jquery.ui.touch.punch.jsスクリプトをオーバーライドできます。あなたの要素はドラッグ可能なものではなく、私の場合のようにおそらくその子であると思います。

たとえば、html 要素にクラスを配置しますclass="useDefault"。次に、スクリプト ファイルに移動し、その部分を見つけます。

...
function simulateMouseEvent (event, simulatedType) {

    // Ignore multi-touch events
    if (event.originalEvent.touches.length > 1) {
      return;
    }

    event.preventDefault();

    var touch = event.originalEvent.changedTouches[0],
        simulatedEvent = document.createEvent('MouseEvents');
....

おそらくご覧のとおり、 jquery.ui.touch.punch.js がブラウザーのデフォルトの動作をオーバーライドevent.preventDefault();することが保証されています。特定のクラス ノードでこれを防ぐには、次の変更を行います。

if (event.originalEvent.touches.length > 1) {
  return;
}
var touch = event.originalEvent.changedTouches[0],
  simulatedEvent = document.createEvent('MouseEvents');
//As you can see here is your class element check
if (touch.target.className === "useDefault") {
  event.stopPropagation();
} else {
  event.preventDefault();
}

このソリューションは、 WebkitブラウザーとjQuery UI Touch Punch 0.2.2リリースでのみテストされています。

迅速な解決策がお役に立てば幸いです、BR

于 2013-01-14T11:57:35.240 に答える
2

Kidwon のアイデアのバリエーション:

同じ方法、同じ部分:

function simulateMouseEvent (event, simulatedType) {
    // Ignore multi-touch events
    if (event.originalEvent.touches.length > 1) {
        return;
    }

    event.preventDefault();

と置換する：

function simulateMouseEvent (event, simulatedType) {
    // Ignore multi-touch events
    if (event.originalEvent.touches.length > 1) return;

    if (simulatedType == 'mouseup') {
        var elem = $(event.originalEvent.changedTouches[0].target);
        if (elem.is("input") || elem.is("textarea")) elem.focus();
        else event.preventDefault();
    } else event.preventDefault();

それが役に立てば幸い。

于 2013-05-24T19:22:47.053 に答える