jQuery Draggable does not move the caret position in the text - javascript

I am using jQuery draggable and it is working fine for the scenarios that are needed. One missing thing is that when I drag my element in the text the cursor does not move along the drag element movement.
For example :- I have a simple use case as
<div id="filterBar" contenteditable="true">This contains some text</div>
is the drop container
<span id="dragOsversion">OSVersion=19.1, 19.2</span>
is the drag element
$.find("#dragOsversion").draggable({helper: 'clone'});
is the instantiation of dragOsversion span to act as a draggable element
Now when I drag the span over the filterBar div, the cursor does not move along :(
This feature is natively present in HTML5 draggable and works fine with the -img- and -a- tags.
for example
<a id="dragOsversion" href="#" draggable="true">OSVersion=19.1, 19.2</a>
is the drag element
Above will move the cursor as the element is moved over the filterBar.
https://jsfiddle.net/VidushiGupta/7warczfy/
is the example showcasing the 2 behaviors
Would any one have an idea how to move along the cursor in text area, when dropping jQuery helper element.
I tried to google a lot on same, but did not find any pointers to even proceed.
I tried some hacks like trying to wrap the element that is draggable by jQuery with in -a- tag which has native draggable. But the jQuery draggable overrides the native behavior and the caret position has no effect while dragging the elements.
Any help / suggestions are much appreciated.

Related

How to make a dragged div land on the position it was dragged to, and how to remove the the "globe"-img on drag in html drag-and-drop

https://codesandbox.io/s/react-drag-div-ddkfg9?file=/src/index.js
If you run the above codesandbox .. you'll see a div in the top left corner which is draggable. But when you drag this div, it:
always returns to top-left of the page on drag-end
there is a "globe" image that shows up beside the pointer while dragging
How do I:
make the div take the position it was dragged to?
show a cursor-grabbing type of cursor while drag is in progress?
Thanks to Yogi's comment, was able to get a proof-of-concept of drag-and-place in react working https://codesandbox.io/s/react-drag-div-forked-ymy3t7?file=/src/index.js

Creating focus on element that's behind a different element

all. I'm a beginner trying to create my own website.
For an input field, I want the text to appear behind horizontal lines. To achieve this, I created a container div element with many sub divs each two pixels high with a bottom border of one pixel, then placed the container div in front of the input field.
The problem is that when hovering over the input field, the cursor only changes into the "text" style cursor in the small area at the very left edge of the input field not covered by the horizontal lines created by the sub div elements.
What I would like to happen, and I fear I may need Javascript, is to have the cursor, when hovering over the container div's horizontal lines, turn into the "text" cursor and when clicked for the focus to activate within the input field.
I hope my question isn't confusing. Thank you in advance.
Add this CSS to your div with horizontal lines:
pointer-events: none;
This indicates that your div element should not become the target of mouse events, effectively letting them "pass through" it.
For more information, see the MDN article on pointer-events.
Assuming that I'm understanding your question, you do need to use JavaScript. Using jQuery you can do the following:
$('.horizontalLines').click(function() {
$('.inputField').focus();
});
This just makes it so that clicking one div will select the text input box.

Constrain element to parent after drop with pep

Working on an image dropper to manipulate (resize/crop) the image using pep.
Got it working to drag and drop on top of the container but when this is happening the element should be constrained to the parent (editor).
Tried via rest/stop but nothing seems to work.
Any suggestions?
[here](http://jsfiddle.net/MaartenTe/z9qusuqc/ "Jsfiddle")

jQuery hover repositions on subsequent hovers

I have a hover event set on an element that use's jQuery UI's position function to show a div right underneath it, with the "out" set to hide that div.
The problem is, subsequent hovers position that div further and further on each hover.
Example: http://jsfiddle.net/Shpigford/8ZkgJ/
Hover over the red box, then hover over it again and you'll see the blue box quickly get positioned further and further to the right.
Same thing happens if I change to a click event. Seems like something odd is happening with positioning when I hide the div and then try to show it again.
Instead of position({...}).show(), use show().position({...}). The reason is that positon won't work when the element is invisible. You can find the following note at http://api.jqueryui.com/position/:
jQuery UI does not support positioning hidden elements

jquery - making dropped objects draggable

how can i make a dragged object into a droppable become "draggable" again?
i tried adding the object by using "append" in jquery. but after seeing/appending the object inside the droppable div. i cannot drag it.
here is my work http://piratelufi.com/flowers/
the images that are already in the gray area can be dragged and resized.
the images in the lower left area, when dragged into the gray area will add it there but cannot be dragged.
i even tried adding to ui-draggable class into the element that needs to be dragged.
Draggebles remains draggable even after drop. Check jQuery UI Droppable

Categories