Dragact | a dragger layout system with React style | Grid library

I've built a slider using pure JavaScript. On mobile screen when I touch the slider I can only change slides but can not scroll down the page.
Under the hood when the slider element is touched, a "touchstart" event fires and the corresponding event handler function, features event.preventDefault() to stop scrolling the page, then when "touchmove" event fires, the code uses difference between first and new horizontal coordinates and CSS left propery to move the slider.

I made a minimal code below. Also click to see code on online editor.

I'm trying to figure out how to auto scroll a scrollview when a user drags an item to the edge of the screen. I'm really not getting the behavious I expect out of this code. Does anyone have an example or a technique that works?

I have this in my:

I'm using material-ui in react. Let's say I have this component with these styles

I'm trying to implement a custom docking solution using a Gtk.DrawingArea placed upon a Gtk.Overlay, but when I attempt to show the Gtk.DrawingArea during a widget's drag_motion event it triggers the drag_leave event. The problem here is that I'm using the drag_leave event to hide the overlay, which means that I'm just toggling between visibility states as the cursor is moving. How can I prevent the overlay from triggering the bottom widget's drag_leave event after it has been made visible?

Also, is there a more efficient way to approach docking? Should I be using Gtk.Window instead of Gtk.DrawingArea? What is the best way to draw a simple rectangle over a region and have it move when an item is dragged?

• I've tried using a Gtk.EventBox instead of a Gtk.DrawingArea
• I've tried using a Gtk.Window with Gtk.WindowType.POPUP instead of a Gtk.Overlay
• I've tried using GDL but I would prefer to create my own widgets using vala
• I've tried calling gtk_overlay_set_overlay_pass_through
• I've tried calling gdk_window_set_pass_through

I have a simple Drag & Drop setup. What's special is that there can be dropzones inside dropzones. My problem is, that whenever I drop something in my child component, the parent event gets fired as well but only under certain circumstances.

For example (this works, no event propagation):

I have a Gtk.TreeView here. Most but not all of the items should be able to be dragged & dropped. In this example the first item should not be able to be dragged & dropped but it should be selectable.

How can I realize this? Maybe I have to use the drag-begin signal and stop the drag in there. But I don't know how.

I want to use my own drag icon in a Gtk.Treeview. The official tutorial says that the drag-begin signal/event can be used for this. The API-Reference give more details about how to do it.

But in my example here it doesn't work. There is still the treeviews default drag icon used. It doesn't matter if I connect via connect() or connect_after().

I have been trying to create a custom UIClass that implements an horizontal scrolling for its inner content by using UIPanGestureRecognizer.

My first success approach was:

I have a webpage that tracks touchmove events allowing the user to drag an element around the screen - works fine.

I dynamically replace html within the moving element while the user is moving it - replacing html works fine.

The issue is if the user drags by touching the inner html (which gets replaced) then the dragging (touchmove events) stop once that inner html is replaced (until the next touchstart).

The event listener is on an outside container, NOT the html that is replaced, so I would think it should keep capturing the events.

Also this issue does NOT occur with mousemove events.

I have made a jsfiddle demo. Using your mouse should work fine and no issues will occur (mousemove events). The issue will arise when you use a touch device (or use Chrome's touch simulation: More Tools > Sensors > Touch > Force Enabled).

https://jsfiddle.net/dmdjvd7e/1/

Same but using jquery: https://jsfiddle.net/a2fwkr4e/6/

In the demo you can drag the red circle around the screen. The yellow box within the circle is replaced every second. If you touch the red (not the yellow) then things will work correctly. If you touch the yellow then things will work until the yellow box is replaced (each second), after-which you wont be moving the element until you touchstart again.

Is this intended browser behaviour? why is mousemove different? Is there a way around this while still allowing me to replace html?

If I don't replace the inner html, and instead just modify it or simply replace the text and not the html elements then there are no problems. However, I'd like to be able to replace the html (as per existing application requirements).

...

Code included for completeness (same as jsfiddle):

css/html: