Ask A Question

Notifications

You’re not receiving notifications from this thread.

How do drag and drop builders work?

josh edgar asked in Rails

So many website builders, form builders etc are comming to market. How do these actually work and is it possible to build something like this in rails?

I'm assuming you drag an element onto a canvas using jquery or something but does it then populate a hidden form or set variables?!? could probably hack my way through to a working project but would love to know the best practice?

Reply

I'm not sure how most of them work, but generally you can just keep the data in Javascript and then submit it over to the server as JSON data when you want to save it. That way you're not dealing with hidden form fields all over the place which would get complicated fast.

The drag and drop portion could be done with any Javascript library for it. You'd probably be best off using something like Vue.js or React for this these days because it clean up a lot of the complexity there. jQuery also works really well, but it tends to lead to some spaghetti code if you don't organize it well.

While this isn't exactly the same, I'm going to be doing a series building a clone of Trello starting in a week or two which will be kind of similar.

Reply

I can point you to 2 different open source website builders, they have a starting point but unfortunetly one is made with React and one is made with Backbone Js, and I wanted something in Vue Js.

  1. Grapes Js http://grapesjs.com/
  2. Relax Cms https://github.com/relax/relax (I'm not sure if the team is still working on it or not.)
Reply

Awesome guys, thank you. It's a great start. Might have to start brushing up on my Javascript.

Reply
Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 81,842+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more.

    © 2024 GoRails, LLC. All rights reserved.