터치스크린용 jQuery UI 'draggable()' 디바지블을 만들려면 어떻게 해야 합니까?
UI jQuery UI를 .draggable()파이어폭스와 크롬에서 작동합니다.사용자 인터페이스 개념은 기본적으로 클릭하여 "포스트잇" 유형 항목을 만듭니다.
기본적으로 클릭하거나 탭합니다.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개체가 노트 저장을 처리합니다.
로드 시 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>
그래서 제 질문은 정말입니다. 어떻게 하면 아이패드에서 이 작업을 더 잘 할 수 있을까요?
저는 jQuery UI를 설정하지 않았습니다. 이것이 jQuery UI나 jQuery에서 제가 잘못하고 있는 것인지, 터치스크린 UI에 작동할 크로스 플랫폼/후진 호환 draggable() 요소를 수행하기 위한 더 나은 프레임워크가 있는지 궁금합니다.
이와 같은 UI 구성 요소를 작성하는 방법에 대한 보다 일반적인 의견도 환영합니다.
감사합니다!
업데이트: jQuery UI에 간단히 연결할 수 있었습니다.draggable()iPad로 전화를 걸어 올바른 드래그 기능을 확인하십시오!
.touch({
animate: false,
sticky: false,
dragx: true,
dragy: true,
rotate: false,
resort: true,
scale: false
});
jQuery Touch 플러그인이 성공했습니다!
많은 시간을 낭비한 후에, 저는 이것을 우연히 발견했습니다!
탭 이벤트를 클릭 이벤트로 변환합니다.jquery 후에 스크립트를 로드해야 합니다.
iPad와 iPhone에서 작동하게 되었습니다.
$('#movable').draggable({containment: "parent"});
주의:이 답변은 2010년에 작성되었으며 기술은 빠르게 발전합니다.최신 솔루션은 아래 @ctrl-alt-dileep의 답변을 참조하십시오.
필요에 따라 jQuery touch 플러그인을 사용해 볼 수도 있습니다. 여기에서 예를 들어 볼 수 있습니다.iPhone을 끌어도 괜찮지만 jQuery UI Draggable은 그렇지 않습니다.
또는 이 플러그인을 사용해 볼 수 있지만 실제로는 자신만의 드래그 가능 기능을 작성해야 할 수도 있습니다.
참고로:믿기 힘들겠지만, 우리는 iPad와 iPhone과 같은 터치 장치가 기능과 드래그 가능한 콘텐츠를 사용하는 웹 사이트 모두에 어떻게 문제를 일으키는지에 대한 증가하는 소문을 듣고 있습니다.
이를 위한 기본 솔루션에 관심이 있다면 터치스타트, 터치무브, 터치엔드의 세 가지 새로운 JavaScript 이벤트를 사용하는 것입니다.애플은 실제로 그들의 사용에 대한 기사를 썼는데, 여기에서 찾을 수 있습니다.간단한 예는 여기에서 확인할 수 있습니다.이러한 이벤트는 내가 연결한 두 플러그인 모두에서 사용됩니다.
이 프로젝트는 도움이 될 것입니다. jQuery UI가 iPad와 iPhone에서 변경 없이 작동할 수 있도록 터치 이벤트를 클릭 이벤트에 매핑합니다.기존 프로젝트에 JS를 추가하기만 하면 됩니다.
http://code.google.com/p/jquery-ui-for-ipad-and-iphone/
jQueryui 1.9가 이 문제를 해결해 줄 것입니다.다음은 사전 데모입니다.
https://dl.dropbox.com/u/3872624/lab/touch/index.html
jquery.mouse.ui.js를 밖으로 가져가서 로드 중인 jQueryui 파일 아래에 붙이면 됩니다!정렬할 수도 있습니다.
이 코드는 저에게 매우 유용하지만 오류가 발생하면 jquery.mouse.ui.js의 업데이트된 버전을 여기에서 찾을 수 있습니다.
Jquery-ui sortable은 Android 또는 IOS 기반의 터치 장치에서 작동하지 않습니다.
github에 대한 이 프로젝트가 당신의 해결책이 될 수 있습니다.
https://github.com/furf/jquery-ui-touch-punch
저는 어제 비슷한 문제로 어려움을 겪고 있었습니다.저는 이미 다른 답변에 언급된 jQuery UI의 draggable과 jQuery Touch Punch를 함께 사용하여 "작동하는" 솔루션을 가지고 있습니다.하지만 이 방법을 사용하는 것은 일부 Android 기기에 이상한 버그를 발생시키는 것이었기 때문에 가짜 마우스 이벤트를 에뮬레이트하는 방법 대신 터치 이벤트를 사용하여 HTML 요소를 드래그 가능하게 만들 수 있는 작은 jQuery 플러그인을 작성하기로 결정했습니다.
결과적으로 요소를 드래그할 수 있도록 하는 간단한 jQuery 플러그인인 jQuery Draggable Touch가 있습니다. 이 플러그인은 터치 시작, 터치 무브, 터치 엔드 등의 터치 이벤트를 사용하여 터치 장치를 주요 대상으로 합니다.브라우저/장치가 터치 이벤트를 지원하지 않는 경우에도 마우스 이벤트를 사용하는 폴백이 있습니다.
jquery.pep.js:
jquery.pep.js는 모든 DOM 요소를 드래그 가능한 개체로 변환하는 경량 jQuery 플러그인입니다.이것은 터치에서 클릭까지 이전 브라우저에서 새 브라우저까지 대부분 작동합니다.저는 jQuery UI의 드래그게이블이 터치 장치에서 작동하지 않기 때문에 (일부 해커 없이) 충족되지 않는 요구를 충족시키기 위해 그것을 만들었습니다.
언급URL : https://stackoverflow.com/questions/3026915/how-can-i-make-a-jquery-ui-draggable-div-draggable-for-touchscreen
'programing' 카테고리의 다른 글
| Associ 및 ftype이 Powershell에서 작동하지 않습니다. (0) | 2023.08.29 |
|---|---|
| 익명 기능에서 작동하지 않는 lodash 디바운스 (0) | 2023.08.29 |
| ASP에서 DbContext를 확인할 수 없습니다.NET Core 2.0 (0) | 2023.08.29 |
| IIS AppPool 작업자 프로세스 ID를 가져오는 방법 (0) | 2023.08.29 |
| printf를 사용하여 64비트 정수를 교차 플랫폼으로 인쇄 (0) | 2023.08.29 |