在Surface Pro平板电脑上启用jQuery UI拖放
Enable jQuery UI drag and drop on Surface Pro tablet
正如标题所说,我正在尝试在Sufrace Pro 3平板电脑上启用拖放功能。
这些设备是否支持拖放功能?如果是,我将如何启用此功能?如果没有,我该如何解决此问题?
我正在尝试让jQueryUI的拖放功能发挥作用。下面是一个我正在努力工作的基本示例:
$( "#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>
我之前也遇到过类似的问题。您需要将所需元素的touch-action
属性更改为none
。在这种情况下,由于您使用的是jQueryUI,因此您将把它应用于.ui-draggable
/.ui-droppable
元素。
您还需要添加-ms
供应商前缀,因此您将使用-ms-touch-action: none
:
.ui-draggable, .ui-droppable {
-ms-touch-action: none;
touch-action: none;
}
有一个适用于Windows 10的更新版本。https://github.com/RWAP/jquery-ui-touch-punch/blob/master/jquery.ui.touch-punch.js
尝试使用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>
无需代码
相关文章:
- jQuery UI自动完成突然停止工作
- Rails/JSON:如何将JSON用于jquery UI自动完成表单
- 停止jQuery UI滑块移动超过给定值
- Jquery UI自动完成无法工作
- jquery ui滑块上的滑块值
- jQuery UI可排序-多连接列表拖动
- 使用Jquery ui时滑块无法工作
- JQuery UI可拖动潜水与滚动棒到鼠标
- jQuery UI自动完成-修改问题
- JQuery UI日期选择器:在选择出发日期时自动弹出返回日期
- 阻止选项卡缓存jquery ui
- 将jQuery UI Timepicker Addon与React一起使用
- 如何在页面重新加载时显示jquery ui对话框
- jquery ui自动完成导致标头错误
- jquery UI draggable:UI.children不是一个函数
- 在JQuery UI Accordion Sortable中使用touchpunch无法正确使用touch
- Jquery UI对话框不会消失
- jQuery UI对话框错误,按钮导致HierarchyRequestError
- jQuery UI使用json文件自动完成
- 如何从内部销毁jQuery UI小部件's原型