Allow p5.element's to become draggable

[ffd8]

Increasing Access

p5.js is already very capable of being used to create custom software within the browser thanks to the framework + the DOM functions that allow one to quickly build a graphical user interface. Nevertheless, it requires quite some style hacking and additional javascript to take it further and really build a tool within the environment. This small addition would allow those learning p5.js to create new custom tools to solve a given problem, lowering the threshold and curve that may be needed to accomplish this task using additional frameworks.

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build Process
• Unit Testing
• Internalization
• Friendly Errors
• Other (specify if possible)

Feature request details

When teaching courses with p5.js, I often love to use it to create small custom programs (with GUI, ie webapps), which reveals how creative coding can enable one to create their own tools. Sometimes they are complex tools for designing posters, manipulating imagery, creating animations, VJing, etc etc – however they all tend to use the DOM functions to create a basic graphical user interface (GUI) to give users access to variables/parameters within the sketch. This GUI panel is usually placed far LEFT or RIGHT, which isn't always the ideal position. Within most software, we're used to being able to drag and move a given GUI panel anywhere to our liking. With a quick search, I found this great snippet on W3SCHOOLS, which could be easily integrated with the existing p5.element code, to enable one to simply write:

.draggable() - to allow the given p5.element to be draggable, or
.draggable(elm) - to move another elm with given elm (ie, title bar of GUI panel)

Here's a quick example of how it would work, a beta function already implemented (still needs documentation): https://editor.p5js.org/ffd8/sketches/phY_pHqaL

Curious what others think– is it useful, does usage/wording sounds correct, ie draggable() or if it's better to use drag() to be similar to the existing drop() function?

[Qianqianye]

Thanks @ffd8 for the requesting draggable feature. Would love to hear what the DOM stewards (@outofambit, @SarveshLimaye, @SamirDhoke) think. Also adding @limzykenneth @davepagurek @raclim to the discussion.

When it comes to make elements draggable, I often use draggable() from jQuery. It might be helpful for us to discuss the focus of p5.DOM and its differentiation from jQuery on top of the issue #1737.

[ffd8]

Thanks @Qianqianye for tagging the stewards into the discussion. Just read the issue regarding jQuery, and agree with the response and would add that it's always amazing to see how far one can get in a p5.js only approach, before including other libraries as needed. In this particular case, imagined elm.draggable() would compliment elm.position(), which sometimes causes my student's tools-1 / tools-2 / tools-3 issues for different window [re]sizes, which is likely solved by more CSS and potentially this.

[limzykenneth]

I think this feature would be nice to have. I've done some work around draggable elements before with all the different possibilities and the native API while powerful is quite confusing. Being able to simplify it in p5.js would be a great help I believe.

[Qianqianye]

Thanks @limzykenneth and @ffd8! I think we can go ahead adding this new feature. @ffd8, will you be interested in working on it?

As a side note, I'd love to work with @limzykenneth and any interested community members to clarify the goal of p5.js DOM for the future p5 software roadmap.

[ffd8]

@limzykenneth + @Qianqianye great to hear of the interest. I hope this small add-on will help those building tools with p5.js quickly implement draggable GUIs in a friendly p5 way.

Just cleaned up my code a bit (also gave draggable elms the 'move' cursor as a default). Added PR now for review.