在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用户界面，如：

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

无代码需要