在Surface Pro平板电脑上启用jQuery UI拖放功能。

Question

正如标题所说，我试图在Sufrace Pro 3平板电脑上启用拖放功能。

这些设备是否支持拖放功能？如果支持，我该如何启用该功能？如果不支持，我该如何解决这个问题？

我想让jQuery UI的拖放功能发挥作用。下面是一个我想让它工作的基本例子。

$( "#draggable" ).draggable();

#draggable {
    width: 200px;
    height: 200px;
    border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="draggable">
  <p>Drag me around</p>
</div>

Answer 1

我之前也遇到过类似的问题。你需要更改 touch-action 财产 所需的元素，以 none. 在这种情况下，由于你使用的是jQueryUI，你会将此应用于 .ui-draggable.ui-droppable 元素。

您还需要添加 -ms 厂商前缀，因此您将使用 -ms-touch-action: none:

.ui-draggable, .ui-droppable {
    -ms-touch-action: none;
    touch-action: none;
}

Answer 2

尝试使用 触摸式打孔机 使得jQuery UI可以在触摸设备上使用。

你只需要把它插入到jQuery ui之后就可以了。

<script src="path/to/file/jquery.js"></script>
<script src="path/to/file/jquery-ui.js"></script>
<script src="path/to/file/jquery-touch-punch.js"></script>

不需要任何代码

Answer 3

有一个更新的版本，适用于Windows 10。https:/github.comRWAPjquery-ui-touch-punchblobmasterjquery.ui.touch-punch.js。