This is a read-only archive of the Framer Community on Facebook.

Hey Vikar Zhang, could you post an example? I'm wondering why you'd need to write a custom draggable. (Perhaps you could extend the draggable within Framer, as well) It's correct that dragging extends beyond the targeted/draggable layer itself. If you're writing a custom one, you could also achieve a similar effect by adding EventListeners to the document, instead of the specific layer, and then checking within that layer whether or not the layer was targeted, for example.

Thanks for help, Benjamin Den Boer.
I am working on a small framework/template based on Framerjs, to help designers who are not good at coding, to achieve some simple interactive prototypes.
In this template, I want to achieve a scroll function, which is similar to the system's scroll, but can use drag operation to control on mac, (instead of scroll operation, which is not
visualized when be in a demonstration, and maybe cause delay problem when you set another layer moving based on a layer's scroll distance.)
Actually, I was first using the official draggable, but as you know, when you scroll something out of its scroll frame, the drag speed maybe need to be changed to a lower ratio. So if I use the draggable, and change the dragSpeed number when drag something out of the edge, the dragSpeed will also effect the distance already dragged. So it will be like this: you drag the element out of frame, the speed is turned lower, which will reset the element's position so it's in frame again, and when it's in frame, the speed is changed higher, so it's out of frame again...
So it's blinking and blinking...
I didn't find a way to change the drag speed in one drag operation and not changing its dragged distance.

I don't know if I have described it clear? If you have any other solution, please tell me.

I did the resistance and actually used a dummy layer and then translated what the resistance / position of the actual layer should be.

Oh, thanks for your solution Jordan Robert Dobson. I think this will work! I will try this.

Yeah it gets a little complicated. The dummy layer sits inside the primary group container... Place it as the back most layer. You lay your content over it that has the touch events. Any time you get a drag event on the dummy layer ignoreEvents = true ( or visible = false ) on the other layers and return on drag end.

That's roughly how I did it. Start out simple without your graphics and just get it working first in a simpler fashion and build from there.

Thank you so much, Jordan Robert Dobson! It really helps a lot. I will try on this.

Hi Jordan Robert Dobson, I tried this, but found it brings new problem. If I place the dummy layer behind the contents, the elements which catch touch events will not pass them down to the dummy layer. So the drag will not work. But if I put it on the content layers, they will not be able to catch touch events.
Maybe the only way to solve this, is Benjamin Den Boer's solution: adding EventListeners to the document, instead of the specific layer.
I think that will be very complicated, so maybe I will not try that until I get long holidays.
Anyway, thank you very much guys.