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
});jQuery를 터치 플러그인은 속임수를 썼는지!