Tôi có giao diện người dùng jQuery draggable()hoạt động trên Firefox và Chrome. Khái niệm giao diện người dùng về cơ bản là nhấp chuột để tạo một mục loại "post-it".
Về cơ bản, tôi nhấp hoặc nhấn vào div#everything(100% cao và rộng) lắng nghe các nhấp chuột và vùng văn bản đầu vào hiển thị. Bạn thêm văn bản và sau đó khi bạn hoàn tất, nó sẽ lưu nó. Bạn có thể kéo phần tử này xung quanh. Điều đó đang hoạt động trên các trình duyệt bình thường, nhưng trên iPad mà tôi có thể kiểm tra, tôi không thể kéo các mục xung quanh. Nếu tôi chạm để chọn (sau đó nó hơi mờ đi), thì tôi không thể kéo nó. Nó sẽ không kéo sang trái hoặc phải chút nào. Tôi có thể kéo lên hoặc xuống, nhưng tôi không kéo từng cá nhân div, tôi đang kéo toàn bộ trang web.
Vì vậy, đây là mã tôi sử dụng để nắm bắt các nhấp chuột:
$('#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);
});
Và đây là mã tôi sử dụng để "lưu" ghi chú và biến div đầu vào chỉ thành div hiển thị:
$('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();
}
});
Và tôi có mã này khi tải trang cho các ghi chú đã lưu:
$('.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Đối tượng của tôi xử lý việc lưu các ghi chú.
Onload, đây là toàn bộ nội dung 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>
Vì vậy, câu hỏi của tôi thực sự là: làm thế nào tôi có thể làm cho điều này hoạt động tốt hơn trên iPad?
Tôi không sử dụng giao diện người dùng jQuery, tôi tự hỏi liệu đây có phải là điều tôi đang làm sai với giao diện người dùng jQuery hoặc jQuery hay không, hoặc liệu có thể có các khuôn khổ tốt hơn để thực hiện các phần tử draggable () tương thích ngược / đa nền tảng sẽ hoạt động cho giao diện người dùng màn hình cảm ứng.
Các nhận xét chung về cách viết các thành phần giao diện người dùng như thế này cũng sẽ được hoan nghênh.
Cảm ơn!
CẬP NHẬT:
Tôi đã có thể đơn giản chuỗi điều này vào draggable()lệnh gọi giao diện người dùng jQuery của mình và có được khả năng kéo chính xác trên iPad!
.touch({
animate: false,
sticky: false,
dragx: true,
dragy: true,
rotate: false,
resort: true,
scale: false
});
Các plugin jQuery cảm ứng đã làm các trick!