Scroll bar inside a sortable div - javascript

I am using jQuery sortable. Inside the sortable div is div that has a vertical scrollbar. If I click the vertical scroll bar, the sortable is triggered but doesn't see the unclick event. I then need to right click in order to drop the sortable div. How can i propagate the unclick or even make it so the scrollbar does not trigger the sortable drag?
$('#sortHolder').sortable();
Example http://jsfiddle.net/L2hWv/
There is this similar question here, but I have a scrolling div inside my sortable.

I have faced your issue with a flash object inside the div. You could try using a drag handle. Docs: http://api.jqueryui.com/sortable/#option-handle

Related

wheelPropagation on a x-scrolling container with perfect-scrollbar

I'm using perfect-scrollbar to scroll large tables on the x-axis.
When the option useBothWheelAxes is set to true I can use the mouse wheel to scroll the table horizontally. When I reach the end of the table, I'd like to keep scrolling down the page.
Looking at the documentation, I'd expect I can use wheelPropagation for this:
If this option is true, when the scroll reaches the end of the side, mousewheel event will be propagated to parent element.
Vertically this does work. However, this doesn't seem to work when scrolling horizontally.
A demo identifying the problem can be found here: https://codepen.io/anon/pen/YaXBoV

Div inside draggable Div

I made a div draggable with $("#divID").draggable(); and it works.
Inside this div I have a second div. I'd like to have the inner div not draggable,
so that the user can drag the whole thing using a "frame" around the inner div.
The inner div contains a ScrollBar and other elements that conflict with the "draggable" feature.
Is it possibile?
Thank you.
Edit:
I made a test page: TEST
The user should be able to drag everything (including "other elements") only in the upper or lower strip, where the cursor become a cross of arrows. I want the user to be unable to drag where the cursors become a pointer.
Thanks again.
I had a vaguely similar issue when working with accordions, I wanted links in the accordion headers and they conflicted with the accordion behaviour.
I fixed it by attaching an event handler to the inner element, and all it did was call evt.stopPropagation() to prevent the parent element(s) from getting the conflicting events.
Try position fixed
div#notDraggable{
position:fixed;
}

Display draggable from div with display set to none

I don't know if this is possible. Is there any way to make a div element visible while the div is not displayed? Specifically I'm using drag and drop items from a drop-down list, and once the list closes, they're invisible. Ideas?
use the Jquery UI drag samples, can help you for what you want.

Make jQuery droppable scroll when onHover event happens

I have a container for lots of divs and I don't know how many child elements it'll have on load.
It is a droppable area and I want to make it scroll to show hidden child content whenever a user hovers a draggable at the top of/bottom of the container.
I am using jquery ui draggables and droppables and will appreciate all the help I can get.
Thanks.

Div mouse hover

Work on ASP.NET 2.0 C# on the web. In my site, I have three divs. Each div contain several elements. When I mouse hover a div then it expands on vertically, initially, all div are in Collapsible. How to write this mouse hover event. How to set all div content in collapsible. I want Accordion but the Accordion header takes place vertically not horizontally.
Sounds like you want an Accordion
You can use a jquery Accordion.
To make the sections expand and collapse on mouse over, use this:
$('.selector').accordion({ event: 'mouseover' });

Categories

Resources