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

时间:2015-02-11 01:18:19

标签: javascript jquery html css jquery-ui

正如标题所说,我试图在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>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:7)

我有一段时间有类似的问题。您需要将所需元素的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;
}

答案 1 :(得分: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>

无需代码

答案 2 :(得分:1)