터치 스크린에 대해 jQuery UI 'draggable ()'div 드래그 가능하게하려면 어떻게해야합니까?
draggable()Firefox 및 Chrome에서 작동 하는 jQuery UI 가 있습니다. 사용자 인터페이스 개념은 기본적으로 클릭하여 "포스트잇"유형 항목을 생성합니다.
기본적으로 클릭 div#everything을 청취하는 입력 (100 % 높고 넓은)을 클릭하거나 누르면 입력 텍스트 영역이 표시됩니다. 텍스트를 추가 한 다음 완료되면 저장합니다. 이 요소를 드래그 할 수 있습니다. 그것은 일반적인 브라우저에서 작동하지만 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 class="instance savedNote" id="iddd1b0969-c634-8876-75a9-b274ff87186b" style="top:134px;left:715px;height:30px;">Whatever dude</div>
<div class="instance savedNote" id="id8a129f06-7d0c-3cb3-9212-0f38a8445700" style="top:131px;left:347px;height:30px;">Appointment 11:45am</div>
<div class="instance savedNote" id="ide92e3d13-afe8-79d7-bc03-818d4c7a471f" style="top:144px;left:65px;height:80px;">What do you think of a board where you can add writing as much as possible?</div>
<div class="instance savedNote" id="idef7fe420-4c19-cfec-36b6-272f1e9b5df5" style="top:301px;left:534px;height:30px;">This was submitted</div>
<div class="instance savedNote" id="id93b3b56f-5e23-1bd1-ddc1-9be41f1efb44" style="top:390px;left:217px;height:30px;">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
});
The jQuery Touch plugin did the trick!
After wasting many hours, I came across this!
It translates tap events as click events. Remember to load the script after jquery.
I got this working on the iPad and iPhone
$('#movable').draggable({containment: "parent"});
Caution: This answer was written in 2010 and technology moves fast. For a more recent solution, see @ctrl-alt-dileep's answer below.
Depending on your needs, you may wish to try the jQuery touch plugin; you can try an example here. It works fine to drag on my iPhone, whereas jQuery UI Draggable doesn't.
Alternatively, you can try this plugin, though that might require you to actually write your own draggable function.
As a sidenote: Believe it or not, we're hearing increasing buzz about how touch devices such as the iPad and iPhone is causing problems both for websites using :hover/onmouseover functions and draggable content.
If you're interested in the underlying solution for this, it's to use three new JavaScript events; ontouchstart, ontouchmove and ontouchend. Apple actually has written an article about their use, which you can find here. A simplified example can be found here. These events are used in both of the plugins I linked to.
This project should be helpful - maps touch events to click events in a way that allows jQuery UI to work on iPad and iPhone without any changes. Just add the JS to any existing project.
http://code.google.com/p/jquery-ui-for-ipad-and-iphone/
jQuery ui 1.9 is going to take care of this for you. Heres a demo of the pre:
https://dl.dropbox.com/u/3872624/lab/touch/index.html
Just grab the jquery.mouse.ui.js out, stick it under the jQuery ui file you're loading, and that's all you should have to do! Works for sortable as well.
This code is working great for me, but if your getting errors, an updated version of jquery.mouse.ui.js can be found here:
Jquery-ui sortable doesn't work on touch devices based on Android or IOS
This project on github may be your solution
https://github.com/furf/jquery-ui-touch-punch
I was struggling with a similar problem yesterday. I already had a "working" solution using jQuery UI's draggable together with jQuery Touch Punch, which are mentioned in other answers. However, using this method was causing weird bugs in some Android devices for me, and therefore I decided to write a small jQuery plugin that can make HTML elements draggable by using touch events instead of using a method that emulates fake mouse events.
The result of this is jQuery Draggable Touch which is a simple jQuery plugin for making elements draggable, that has touch devices as it's main target by using touch events (like touchstart, touchmove, touchend, etc.). It still has a fallback that uses mouse events if the browser/device doesn't support touch events.
You can try using jquery.pep.js:
jquery.pep.js is a lightweight jQuery plugin which turns any DOM element into a draggable object. It works across mostly all browsers, from old to new, from touch to click. I built it to serve a need in which jQuery UI’s draggable was not fulfilling, since it didn’t work on touch devices (without some hackery).
'IT박스' 카테고리의 다른 글
| 디렉토리를 재귀 적으로 복사하는 배치 파일 (0) | 2020.08.05 |
|---|---|
| AlertDialog에서 사용하기 위해 뷰를 부 풀릴 때 "뷰 루트로 null을 전달하지 마십시오"경고 (0) | 2020.08.05 |
| Google OAuth 2.0 API의 범위 목록은 어디에서 찾을 수 있습니까? (0) | 2020.08.04 |
| Tortoise의 비 재귀 커밋은 어떻게 작동합니까? (0) | 2020.08.04 |
| ODBC없이 Java에서 Access 데이터베이스 조작 (0) | 2020.08.04 |