1

我有一个应用程序，其中包含 jquery 可拖动 div。我在可拖动的 div 中放置了四个文本字段以获取用户的输入。

ASP:

    <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 可拖动还是我做错了什么？

除了 JqueryUI.js 我在应用程序中使用 JqueryTouchPunch.js 和 JSPlumb.js。

任何帮助将不胜感激。

4

2 回答 2

4

好的，这是一个解决方案，如果您的textfield任何 HTML 元素不是聚焦、滚动、选择单词、在文本周围移动文本光标以及可能出现的任何不同情况，那么您可以覆盖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');
....

正如您可能看到的event.preventDefault();，确保jquery.ui.touch.punch.js 覆盖浏览器的默认行为。为了防止我们的特定类节点出现这种情况，请进行以下修改：

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 回答