标签: jquery-ui-touch-punch
jQuery UI Sortable - 当页面可滚动时,Div不可拖动
提前谢谢你看看我的问题.
我正在创建一个网站,其中我有一个div列表,可以在Y轴上使用jQuery UI进行排序.
由于我希望使用触摸在移动设备上运行,因此我必须添加一些黑客以确保jQuery UI可用(因为它目前不支持触摸事件.).
这个hack被称为jQuery UI touch punch.
网站:jQuery UI触摸打孔.
GitHub:jQuery UI触摸打孔.
现在来了我的问题.有时列表变得如此之大,以至于网站将可滚动,当网站可滚动时,我无法正确拖动项目,因为当我尝试拖动div时,它只是滚动页面.我可以拖动它的唯一方法是当我双击该项目然后拖动它.
但这真的不是我想要的,因为使用和不自然真的很乏味.
现在的问题是,有没有办法在尝试从可拖动集中拖动其中一个项时禁用滚动.我尝试添加overflow-y: hidden点按或添加touch-action : none.不幸的是,这似乎不起作用.
总结
我所拥有的:我现在可以使用jQuery UI和jquery UI触摸打孔器通过触摸设备拖动和排序Div of List.
问题:列表将变得如此之大,以至于网站可以滚动,只需点按一下即可禁用拖动,我需要双击拖动项目.
我想要的是:即使我有滚动条,我也希望能够拖动项目(不需要双击).
我怎么能意识到这种行为/我应该从什么开始？任何提示和解决方案表示赞赏.
最后但并非最不重要的是这是我的FIDDLE.
编辑:
我正在使用:
IE 11
jQuery版本1.11.1
jQuery-ui版本1.11.4
推荐指数
解决办法
查看次数
在移动浏览器中播放拖放音频
我有一个拖放的网站,可用于计算机,平板电脑和手机.它使用jQuery,jQuery UI和jQuery UI Touch Punch.拖动会导致播放短音频片段,同时播放也会播放.这个小提琴有一个例子.
不幸的是,在当前版本的iOS Safari和Android Chrome中,音频无法正常工作.有办法解决这个问题吗？
此图像解释了各种浏览器版本中的行为:
图片说明:
iOS Safari:在iOS 8.4及更低版本中,拖动音频和丢弃音频都会播放.在iOS 9.0及更高版本中,拖动音频和丢弃音频都不会播放.
Android Chrome:在版本51.0.2704.81中,拖动音频和丢弃音频都会播放.在版本52.0.2743.98和版本55.0.2883.91中,拖动音频和丢弃音频都不会播放.在版本56.0.2924.87和63.0.3239.111中,拖动音频不播放,但丢弃的音频播放.
这是代码,如果小提琴消失了:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Drag and Drop with Audio</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/css/base/jquery.ui.all.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.2/css/lightness/jquery-ui-1.10.2.custom.min.css" rel="stylesheet">
<style>
body {
background: #fff;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#draggable {
width: 100px;
height: 100px;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
}
#droppable {
width: 150px;
height: 150px;
padding: 0.5em;
float: …jquery google-chrome jquery-ui mobile-safari jquery-ui-touch-punch
推荐指数
解决办法
查看次数
jQuery-ui滑块无法使用jQuery-ui Touch Punch
我有一个jQuery-ui滑块,我正在尝试使用jQuery-ui Touch Punch在iPad上工作.根据文档,一旦我包含了库,我应该只需要执行以下操作以使其在iPad上运行.
$(".ui-slider-handle").draggable();
但是,这不起作用.有人可以帮忙吗？
HTML
<div id="scroll"></div>
JS
$(function(){
$("#scroll").slider({
orientation: "vertical",
range: "min",
min: 0,
max: 100,
value: 100
})
})
$(".ui-slider-handle").draggable();
推荐指数
解决办法
查看次数
如何在Angular 2 Webpack应用程序中导入jquery ui touch punch？
我有jQuery范围滑块小部件,我导入和使用如下:
declare var jQuery: any;
import 'jquery-ui/ui/widgets/slider';
import 'jquery-ui/ui/widgets/mouse';
并像这样使用它:
jQuery(this.elementRef.nativeElement).find('#range-slider').slider({..});
我的滑块工作正常.
问题是我需要启用移动触摸的滑块,所以我导入了jQuery UI Touch Punch:
declare var jQuery: any;
import 'jquery-ui/ui/widgets/slider';
import 'jquery-ui/ui/widgets/mouse';
import 'jquery-ui-touch-punch';
但它错误:
TypeError: Cannot read property 'prototype' of undefined
显然它无法找到jQuery和jQuery UI.但是,当导入的jQuery不在全局范围内时,如何将jQuery传递给触摸？
我将这个样板用于我的项目.
推荐指数
解决办法
查看次数
Touch Punch JQuery UI 提供什么功能？
我正在使用 JQuery UI Touch Punch，就像我在JSFiddle中使用它一样。我搜索了很多地方来找出event和ui包含的内容，但我无法找到有关它的内容。
我是否缺少某种文档？或者有人可以解释一下 Touch Punch 提供什么以及event和ui参数包含什么？
javascript jquery jquery-ui jquery-ui-touch-punch jquery-events
推荐指数
解决办法
查看次数