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
Related
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
So I have a canvas with a mouse hover animation on it and above that an overlay which contains a menu. what I want to achieve is to pass on the mouse hover event to the canvas even while I am hovering on the menu.
right now I have it working partly,
I have currently solved this problem partly by using CSS property pointer-events: none in the div containing the menu and auto in the clickable list menu elements but while hovering over the menu, the lower canvas doesn't detect the mouse as it has its focus on the menu list child which is set to auto in the mouse pointer events.
How can I allow the above menu to remain clickable while passing on the hover event to the lower canvas?
Using JQuery you can say that if you hover over either element then do "something" :
$('.canvasClassName, .menuClassName').mouseover(function () { /*Canvas Action*/ });
Where canvas/menu ClassName would be a class of the object. (Using other properties like id is also valid using a # instead of a period)
The hover effect will work if you hover over the canvas or the menu while maintaining the menu's useability.
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.
I have a draggable element that I am dragging into one of various droppable areas. However, I want the draggable item to always return to its original position, even if it was dragged into a droppable area (the droppable areas handle their own events when the draggable is dropped onto them). Is there a way to do this?
I notice that returning true or false from the stop() function in draggable affects both its return to original position as well as whether or not it triggers the droppable's drop() function. Is there a way to handle these separately?
It's kinda a hack but when you have
$('yourelement').draggable({revert:true});
will revert it no matter if it drops or not. And it will still fire the drop event on the droppable element.
Do you want your droppables to accept other elements? If not, you can set the 'accept' option of the droppable to 'false'
$('.foo').droppable('option','accept',false);
Items are stored with x,y coordinates. The .items div starts at [0,0] and is repositioned based on movement of .dragger (which is made draggable). Everytime the user stops dragging / releases, .dragger is repositioned to the center of the screen, and an AJAX request is made which places the next x/y coordinated items which are in the current viewport in the .items container.
That's the introduction.
Every item-type has a imagemap (default [0,0,12,12,15,15,20,25] style). I add an html image-map with those values to .items for every item that is loaded.
The problem is I want the space outside the imagemap to behave as if the user was hovering only the .dragger div. I've added CSS styles to:
dragger (cursor:move)
imagemaps (cursor:pointer)
When I hover my mouse just outside an imagemap (but still on the image, however it is transparent png so I 'think' i'm hovering the .dragger div) the cursor doesn't go from pointer to move-cursor, but from pointer to normal arrow. Only outside the image-boundaries it turns into a move-cursor. And when I try to drag (on the image, outside the imagemap), i copy/drag the item-image (browser integrated drag, not the jQuery drag used on .dragger).
I need the .dragger helper and reposition the .items div based on it's movement. Is the cursor/drag behavious possible?
<div class="wrapper">
<div class="dragger"></div>
<div class="items"><!-- dynamic content --></div>
</div>
Please find the answer in this question
Just taking a guess here, but could you possibly make an "inverse" version of the image map using the resulting link as a draggable trigger? You would apply it to start the draggable helper, thereby triggering the drag by being "outside" the original image map area...