在 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 property 更改为 none。在这种情况下，由于您使用的是 jQueryUI，因此您可以将其应用于 .ui-draggable/.ui-droppable 元素。

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

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

Answer 2

尝试使用 Touch Punch，它可以在触摸设备上使用 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

有适用于 Windows10 的更新版本。https://github.com/RWAP/jquery-ui-touch-punch/blob/master/jquery.ui.touch-punch.js

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

Enable jQuery UI drag and drop on Surface Pro tablet

html

javascript

css

jquery

jquery-ui