基本上，我点击或点击div#一切(100％高和宽)监听点击，并显示输入textarea。你添加文本，然后当你完成它保存它。您可以拖动此元素。这是正常的浏览器，但在iPad上，我可以测试，我无法拖动项目。如果我触摸选择(它然后昏暗稍微)，我不能然后拖动它。它不会向左或向右拖动。我可以向上或向下拖动，但我不拖动单个div，我拖动整个网页。
所以这里是我用来捕获点击的代码：
$('#everything').bind('click',function(e){ var elem = document.createElement('div'); STATE.top = e.pageY; STATE.left = e.pageX; var e = $(elem).CSS({ top: STATE.top,left: STATE.left }).HTML('<textarea></textarea>') .addClass('instance') .bind('click',function(event){ return false; }); $(this).append(e);}); 下面是我用来“保存”音符并将输入div转换为显示div的代码：
$('textarea').live('mouseleave',function(){ var val = jquery.trim($(this).val()); STATE.content = val; if (val == '') { $(this).parent().remove(); } else { var div = $(this).parent(); div.text(val).CSS({ height: '30px' }); STATE.height = 30; if ( div.wIDth() !== div[0].clIEntWIDth || div.height () !== div[0].clIEntHeight ) { while (div.wIDth() !== div[0].clIEntWIDth || div.height () !== div[0].clIEntHeight) { var h = div.height() + 10; STATE.height = h; div.CSS({ height: (h) + 'px' }); // element just got scrollbars } } STATE.guID = uniqueID() div.addClass('savednote').attr('ID',STATE.guID).draggable({ stop: function() { var offset = $(this).offset(); STATE.guID = $(this).attr('ID'); STATE.top = offset.top; STATE.left = offset.left; STATE.content = $(this).text(); STATE.height = $(this).height(); STATE.save(); } }); STATE.save(); $(this).remove(); }}); 我有这个代码，当我加载保存的笔记的页面：
$('.savednote').draggable({ stop: function() { STATE.guID = $(this).attr('ID'); var offset = $(this).offset(); STATE.top = offset.top; STATE.left = offset.left; STATE.content = $(this).text(); STATE.height = $(this).height(); STATE.save(); }}); 我的STATE对象处理保存注释。
Onload，这是整个HTML体：
<body> <div ID="everything"></div> <div ID="IDdd1b0969-c634-8876-75a9-b274ff87186b" >Whatever dude</div> <div ID="ID8a129f06-7d0c-3cb3-9212-0f38a8445700" >Appointment 11:45am</div> <div ID="IDe92e3d13-afe8-79d7-bc03-818d4c7a471f" >What do you think of a board where you can add writing as much as possible?</div> <div ID="IDef7fe420-4c19-cfec-36b6-272f1e9b5df5" >This was submitted</div> <div ID="ID93b3b56f-5e23-1bd1-ddc1-9be41f1efb44" >Hello world from iPad.</div> </body>
所以，我的问题是真的：我如何使这项工作更好在iPad上？
我不是在jquery UI上设置，我想知道这是我做错了jquery UI或jquery，或者是否可能有更好的框架做跨平台/向后兼容的draggable()元素工作为触摸屏UI。
更多关于如何编写UI组件的一般性意见也将受到欢迎。
谢谢！
更新：
我能够简单地链接到我的jquery UI draggable()调用，并获得正确的可拖动性在iPad上！
.touch({ animate: false,sticky: false,dragx: true,dragy: true,rotate: false,resort: true,scale: false}); jQuery Touch plugin做了窍门！
解决方法 浪费了很多小时后，我遇到了这个！jquery-ui-touch-punch
它将点击事件转换为点击事件。
记住在jquery之后加载脚本。
我有这工作在iPad和iPhone
$('#movable').draggable({containment: "parent"}); 总结 以上是内存溢出为你收集整理的如何使一个jQuery UI’draggable()’div可拖动触摸屏？全部内容，希望文章能够帮你解决如何使一个jQuery UI’draggable()’div可拖动触摸屏？所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）