I am trying to implement drag and drop functionality for iPad using jquery mobile using touchmove event. Before doing this I read kind of a lot of questions here like this one, which actually looks for a suitable framework, which I am not looking into. Also this, this and this which helps with how drag and drop can be imlemented.
My code looks as follows (here is only my relevant html/js, the full relevant code can be found in fiddle).
HTML
<span class="square"> 1 </span>
<span class="square-big"> 1 </span>
JS
$('.square').on('touchmove',function(e){
var touch = e.originalEvent.touches[0];
var elm = $(this).offset();
$(this).addClass('selected').css({
left: touch.screenX - elm.left,
top: touch.screenY - elm.top
});
$('.square-big').addClass('selected');
}).on('touchend', function(e){
$(this).removeClass('selected');
$('.square-big').removeClass('selected');
});
My code partially works. By this I mean, that the element is moving but way it moves is really ugly and it is kind of far away from the finger. It is also shaking.
This is because I calculate wrongly my left and top. But I can not get how exactly I need to calculate them. Any ideas would be appreciated.
You can try my fiddle, but for some reason I can not correctly get rid of screen move in jsfiddle, so it is better to copy the whole code and to run it through localhost.
Related
Are there any issues surrounding the use of contenteditable div elements in jQuery UI that lead to the caret not appearing. Here is a bit of code to show what I mean
<div id='diaHTMLEd' style='display:none'>
<div id='divRTE'></div>
<!--iframe src='xrte.html' height='300' width='500'></iframe-->
</div>
function openHTMLEditor( {
$('#diaHTMLEd').dialog({
height:200,
width:450,
modal:true,
open:addRTE
});
}
function addRTE() {
$('#divRTE').html("<div contenteditable='true'>Testing</div>");
return;
}
Explanation - I am opening up a modal jqUI dialog and in its :open event am adding a contenteditable div element to an inner div in the dialog. The text shows up but it does not become editable when clicked. If I replace that code and use the commented out iframe instead which contains an contenteditable drive everything works just fine.
It looks like there is something that stops content from becoming editable inside the dialog.
This question may be lacking in some detail but given the complexity of my application I am not really in a position to provide more representative code. Any help would be much appreciated.
A note for anyone running into this thread. After much work I eventually discovered the issue. Using contenteditable with jQuery UI dialogs is not by itself a problem. The problem in my case came down to some sort of conflict with the excellent jstree plugin which I am using.
As a general rule - in complex applications that use multiple plugins you are probably better off sandboxing contenteditable content inside an iframe
All I want to do is capture the event that a user taps an and clear it. I can't get anything to work with iPhone 3GS.. There is barely any documentation on how to actually use jQuery mobile.. that I can find anyway.. so theese are my guesses mostly:
$("#wrap").live('pageinit', function() {
$('#search_field').live('tap',function(event) {
if ($(this).val() == "Search Applications") {
$(this).val('');
}
});
});
This borks my design and adds a "loading" header at the bottom of the page....
Edit: Seems like it randomly works on the 3GS but the most annoying is that just jQuery mobile destroys my site layout!! my submit button jumps down
()
just looking over you code are you trying to use a place holder and clear it if the user taps it? If so you can simply add an attribute to your HTML5 like this:
<imput type="text" placeholder="Search Applications" />
Live example:
http://jsfiddle.net/KVuvm/
http://jsfiddle.net/KVuvm/1/ (With jQM Look and Feel)
http://jsfiddle.net/KVuvm/14/ (if you still wanted to use JS)
This is more of a proof of concept for myself, to fool around and learn what I can and can't do with jQuery, and I have had partial success.
I created an accordion that contains two spans, which serve as name and description, as well as a button that is independently click-able (ie, it does not open or close the accordion.)
Taking that concept, I decided to try and make the name and description editable by turning the name and description spans into text inputs / text areas, which worked fairly well.
The problem however is that when I take the same technique I used on the button and use it on the input and textarea, clicking it does not allow you to move the cursor to different positions. There does not seem to be a way for me to get around this behavior.
I tried event.preventDefault(), which does not work at all.
I tried event.stopPropagation(), which gives the partially working behavior.
and I tried return false, which worked the same way as stopPropagation.
I was wondering if anyone could provide any insight on this issue.
I included the jQuery javascript below, but for a much more concise example I will provide a jsfiddle link here (http://jsfiddle.net/Rakshasas/xFhN3/) which gives you a much more clear example of what I am doing. Note that when you click the accordion to expand it, the spans are hidden and inputs are shown. Clicking the inputs does not close the accordion, but it also does not allow you to position the cursor.
Also, if you do attempt to change the text in the inputs, closing the accordion does indeed update the spans which is the intended result. This is why I am saying my concept partially works.
Thank you.
$(function() {
$(".accordion").accordion({
header: 'h3',
collapsible: true,
active: false,
change: function(event, ui) {
var id = ui.newHeader.find('input:last').val();
$("#status").text(id);
ui.newHeader.find('div.headerContainer input.name').val(ui.newHeader.find('div.headerContainer span.name').text());
ui.newHeader.find('div.headerContainer textarea.desc').val(ui.newHeader.find('div.headerContainer span.desc').text());
ui.oldHeader.find('div.headerContainer span.name').text(ui.oldHeader.find('div.headerContainer input.name').val());
ui.oldHeader.find('div.headerContainer span.desc').text(ui.oldHeader.find('div.headerContainer textarea.desc').val());
ui.newHeader.find('div.headerContainer span').hide();
ui.newHeader.find('div.headerContainer input, div.headerContainer textarea').show();
ui.oldHeader.find('div.headerContainer span').show();
ui.oldHeader.find('div.headerContainer input, div.headerContainer textarea').hide();
}
});
$('input.name, textarea.desc').click(function(event){
event.stopPropagation();
});
$(".delButton").button({
icons: {primary: 'ui-icon-trash'},
text: false
}).click(function(event) {
//Display user friendly text
return false;
});
});
If someone is facing this issue, this is a little trick that worked for me.
PROBLEM: nested jquery accordions with input/textareas elements, cannot gain focus with normal click in Firefox (if you use jquery accordions with NO nested accordions on it, everything works fine). Confirmed by above users.
The sympton relates only to normal click (left click). If you try optional click (right click), the element (input/textarea) WILL gain focus. Weird.
SOLUTION: Just declare this in your document ready function
$(function() {
//some code ...
$("input, textarea").click( function(){
$("input, textarea").blur();
$(this).focus();
});
//more code ...
});
Confirmed (by me) working on IExplorer, Firefox and Chrome.
Seems to work fine in Chrome. This might be browser dependent.
"Clicking the inputs does not close the accordion, but it also does not allow you to position the cursor"
Also fine in Chrome.
As I was developing an application with jQuery (latest version), my firefox browser decided to update itself to version 6. Right after that, I got the standard jquery ui "sortable" function not working properly. I tried on the jquery website and same thing. Tried with the demo files downloaded with the jquery ui bundle => same result. No hacks, no custo, just vanilla.
Here are the symptoms: starting the sorting (by clicking and dragging the mouse around), the sortable element sticks to the mouse pointer. Fine until there. But when releasing the left mouse button, the sortable element drops on its final position and suddenly, as I move the mouse elsewhere (no mouse buttons clicked) the last sorted element sticks back to the mouse and moves with the pointer.
Clicking somewhere on the page moves the sortable element back to the final dropped position but as soon as I move again the mouse, that element sticks again and does not drop.
Has anyone come over such a bug with firefox 6?
FYI, this sortable function was working like a charm on FF 5.0
All right guys!! I found the root cause of such a weird behaviour!!! Its name is "FireQuery 1.0" addon for Firefox.
When I saw Guntram telling me that he is using FF6 with the latest version of jQuery + jQuery-UI with no issues at all, I wondered if that could come from an addon. So I disabled everything and re-activated them, one by one, with a restart after each enabling. I found the guilty addon: FireQuery 1.0.
Not saying that this addon is not good but at least, if you ever come with the same issue as mine, at least now you may know the root cause. ;)
to me the sorting works alright.
the elements dont move unexpectedly.
when i have an item in an element, like a button or a textfield, nothing happens.
if i right-click into the field or button the cursor appears (the button is clicked).
and when i escape the windows right-click options menu i can type into the text field...
so still strange behaviour. i don't know how it works on ff5, i am on ff6, latest jquery version.
EDIT:
after i found this:
http://weblogs.asp.net/jeffwids/archive/2011/01/31/jquery-textbox-in-sortable-is-not-clickable-selectable.aspx
i took a closer look at the cancel option provided by the jquery-sortable.
i finally could solve it like this:
<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><input type="text" value="text" ></input></li>
<li class="ui-state-default" style="height: 70px;"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><textarea cols="20" rows="3">textarea</textarea></li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><button>button</button></li>
</ul>
<script>
// initialize the sortable including the cancel option
$( "#sortable" ).sortable({cancel: 'input,button,textarea'});
</script>
I have the same problem. After a day's worth of testing I have found out what the issue is and what kicks this behaviour off.
Let me first show you what we're using the sortable class on.
-----------
| Header |
-----------
| |
|Contents |
-----------
Header is draggable. If you quickly or erratically move the mouse cursor while dragging and the mouse cursor somehow gets moved off the header (e.g. onto the contents), the div sticks to the cursor.
To re-pin the div back onto the page, you can again quickly move the cursor and try to get it back on the header. Then it seems the events are re-attached and you can place the div back on the page.
To sum up, the mouse shifts off the div with the sortable events attached so the object is not seeing the mouseup or click events that place the object back on the page.
Unfortunately, I have no idea how to fix this.
EDIT
We implemented a solution which works for us, but may not be ideal for everyone. Simply .trigger("mouseup") on the draggable element when a click event occurs on any element that should not be dragable. This will snap the draggable element back onto the page.
This is going to be fairly hard to explain, so I've put together a JsFiddle to help demonstrate. http://jsfiddle.net/j5TKr/
I've tried to include everything that I require without complicating it too much. The overall aim is to have a list of li's which can be selected (single click, ctrl-click, shift-click) or double-clicked to be opened. The selected li's can be dragged around (so that they can be moved into other folders). The JsFiddle doesn't have the li's being grouped together correctly, but I'm not worried about that as it is actually working correctly.
The problem that I have is that in Google Chrome and IE (and possibly other browsers - not Firefox) you can't drag the li's around using the image within the anchor. Or more specifically, in Chrome it doesn't drag until you release the mouse button. If I remove the image (the "This one works" text link) it works. If you drag using the image information below the actual anchor, it works as well.
I gather it's a problem to do with me wanting to be able to click and select li's without actually opening the links.
Sorry if this is all a bit confusing. I'll answer any questions that come up.
Here’s an HTML workaround effective in IE and Google Chrome.
Instead of marking your draggable elements up like so:
<div class="icon">
<a title="assets" href="[link]">
<img src="[image]" />
</a>
</div>
Mark them up like so:
<div
class="icon"
style="width: 90px; height: 90px; background: url('[image]')">
</div>
(You could, of course, separate the added CSS from the HTML.)