Ich habe eine jQuery-Benutzeroberfläche draggable(), die in Firefox und Chrome funktioniert. Das Konzept der Benutzeroberfläche besteht im Wesentlichen aus einem Klick, um ein Element vom Typ "Post-It" zu erstellen.
Grundsätzlich klicke oder tippe ich auf div#everything(100% hoch und breit), um auf Klicks zu warten, und ein Eingabetextbereich wird angezeigt. Sie fügen Text hinzu und speichern ihn dann, wenn Sie fertig sind. Sie können dieses Element verschieben. Das funktioniert in normalen Browsern, aber auf einem iPad, mit dem ich testen kann, kann ich die Elemente nicht verschieben. Wenn ich zum Auswählen berühre (es wird dann leicht gedimmt), kann ich es nicht ziehen. Es wird überhaupt nicht nach links oder rechts gezogen. Ich kann nach oben oder unten ziehen, aber ich ziehe nicht die Person, sondern divdie gesamte Webseite.
Hier ist der Code, den ich zum Erfassen von Klicks verwende:
$('#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);
});
Und hier ist der Code, mit dem ich die Notiz "speichere" und das Eingabediv nur in ein Anzeigediv verwandle:
$('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();
}
});
Und ich habe diesen Code, wenn ich die Seite für gespeicherte Notizen lade:
$('.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();
}
});
Mein STATEObjekt behandelt das Speichern der Notizen.
Onload, das ist der gesamte HTML-Body:
<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>
Meine Frage lautet also wirklich: Wie kann ich diese Funktion auf dem iPad verbessern?
Ich bin nicht auf die jQuery-Benutzeroberfläche eingestellt. Ich frage mich, ob ich mit der jQuery-Benutzeroberfläche oder jQuery etwas falsch mache oder ob es möglicherweise bessere Frameworks für plattformübergreifende / abwärtskompatible draggable () -Elemente gibt Arbeit für Touchscreen-Benutzeroberflächen.
Allgemeinere Kommentare zum Schreiben solcher UI-Komponenten sind ebenfalls willkommen.
Vielen Dank!
UPDATE:
Ich konnte dies einfach mit meinem jQuery UI- draggable()Aufruf verketten und die richtige Draggability auf dem iPad erhalten!
.touch({
animate: false,
sticky: false,
dragx: true,
dragy: true,
rotate: false,
resort: true,
scale: false
});
Das jQuery Touch Plugin hat es geschafft!