Simple way to drag and drop text into textarea on Safari - javascript

Is there a simple way to implement drag and drop for Safari or is not supported?
I've been only able to listen for events when the element is dropped to the target textarea. The main problem is I am not able to detect the exact position where the draggable text was dropped, and just works by appending it at the end of the textarea.
From this answer I managed to add the text:
Allow drag text and drop it in html input field without clearing previous data (only works on Safari)
The drag and drop is done natively somehow on Chrome and Firefox (this last one requires the entire text is selected and set to draggable).
I'd like to know if there is a trick for web-kit so it just works like the Firefox trick.

Implement Firefox trick. (Not tested without selecting via JS all the draggable text)
Detect via JS if Safari browser is being used and if so perform the following:
Remove draggable attribute from the draggable element:
item.removeAttribute('draggable')
Add the Safari proper draggable attribute:
item.setAttribute('style', '-webkit-user-drag:element;')
Safari example of proper draggable element:
<span style="-webkit-user-drag:element;">DRAGGABLE TEXT</span>
Source: https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/DragAndDrop.html

Related

materialize css select box issues in Internet explorer

materializecss select box in Internet explorer 9 or more it can't be able to scroll using mouse button,click on the scroll bar inside the select box it diapers. But all other remaining browsers working properly.
i have also attached the sample screen shot,kindly help to solve this issue..
You will need to add a behavior for mouse down events in addition to triggering a close. Check out issue #901 at https://github.com/Dogfalo/materialize/issues/901

Programmatically select DOM element (as if with mouse) on Safari Mobile?

Would like to programmatically select HTML within a DOM element, as if the user had selected with a mouse, precisely to avoid making them select with a mouse.
This bit of elegant code from SO post (Select all DIV text with single mouse click) works great on laptop browsers I tested (IE, Chrome, FF, Safari on Windows and Mac):
function selectText(el) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(el);
range.select();
console.log("select 1");
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(el);
window.getSelection().addRange(range);
console.log("select 2");
}
else {
console.log("select 3");
}
};
JSFiddle: http://jsfiddle.net/z4yMh/7/
But does not work on Safari mobile (see JSFiddle). The mobile dev console shows he console shows select 2 indicating the click event is getting called, mobile dev console shows no error (i.e. the methods selectNode() don't seem to be null), just nothing happening.
Can't guess why. Googling is hard as select is also used to refer to a different concept jQuery/DOM selectors.
What I'm hoping for is an effect that's like native selection in Safari mobile, as in the picture here:
This project does not use jQuery, but if that solves the problem jQuery would be fine.
According to the CSS Ninja
When setting a range iOS Safari won’t actually show the selection as
highlighted but if you were to check the document selection it would
return the correct content, desktop browsers will show the range
selected in the document.
However if you do the same with a user action like tapping the “set
selection range” button in the demo the iOS highlight will show up.
Another interesting quirk is if I tap the content and bring the
keyboard up but don’t dismiss it then refresh the page the
programmatically set selection will show the iOS selection highlight.
Another interesting find is if you perform execCommand, which I’ll
touch on later in the article, like bold it will apply the command to
the selection made and make the iOS selection UI appear.
Hope this helps.
I agree with #nietonfir but I also updated the jsfiddle, a few times, to see how it would react.
The important point is to replace "click" with one of: touchstart, touchmove, touchend, touchcancel.
element.addEventListener('touchstart', function(e) {...});
See it in action here (minus the Mobile Safari selection UI):
http://jsfiddle.net/z4yMh/16/

WinJs textarea focus issue

When running http://ichord.github.io/At.js/ page in IE10, it works correctly in a sense it returns focus to textarea after selecting suggestion from autocomplete list. It also works when I use on screen keyboard and touch input (on surface rt or simulator).
When I try to run the same code as WinJs app, it works for mouse/keyboard selection, but when I select item using touch it doesn't return focus to textarea, which is really frustrating.
Is it known bug? Are there any known workarounds to it?
What it interesting it also doesn't hide on screen keyboard.

Javascript : drag and drop image tag

I wanted to know how to do a drag and drop image tag using javascript. I know html5 each element can be dragged but I wanted to make it work on older browser. I have made the drag and drop using javascript and it worked fine except in ie and firefox when mouse down, the mouse move event didn't react unless the user click it, and that is the reaction of ie. On firefox, the image got changed to semi-transparency and draggable but my code that dragging it.
Can anyone know how to solve this problem ? please help.
Have you tried jQuery yet? with the addon jQuery ui you can drag and drop every object on a website..
jQuery UI: draggable

Can't get Position&Container Infomation by Click the iPad

In chrome or Safari browser, when I select the text on the page I can get the Selection-info by window.getSelection(), And it worked on iPad too.
But when I just click , in browser, I will get a window.getSelection (isCollapsed==true) with full infomation about the position and container . In iPad it just tell you the selection isCollapsed but the position info is 0 or null.
Anyone have an idea how to get the container and the position info when you click in iPad?
Basically using touch events you could do this. It is not just the selection but the number of the fingers you used too. It works on iPad on iPhones on almost every mobile. After setting your handlers for touch events you can map them easily to fire the click events or do something else.

Categories