Drag And Drop With Stimulus JS | Intro To Ruby On Rails 7 Part 22

Поделиться
HTML-код
  • Опубликовано: 18 ноя 2024

Комментарии • 15

  • @Deanin
    @Deanin  2 года назад +5

    Why can't we just have a "Allow Drag And Drop" button?! 😓
    Decided to share the implementation I'm planning to use for learn.deanin.com/courses/build-a-linktree-on-rails/

  • @unknownman1
    @unknownman1 Год назад +3

    Not gonna lie, I learned a lot from this series, but I doubt if I can implement similar things myself. I'm coming from React and have been learning Ruby and Rails for the past 2 weeks, but idk it's kinda overwhelming sometimes.

    • @Deanin
      @Deanin  Год назад +1

      I have to be honest, I feel intimidated at the thought of recreating what I did in this series. Building incrementally lets you take digestible steps that eventually look super intimidating. But at the end of the day, I spend a considerable amount of time on each video. So don't feel too bad about it feeling overwhelming. After a year and a half of doing videos every day, I finally feel at least a little confident lol. But the imposter syndrome still gets me sometimes.
      Not sure if this helps, but I felt like I had to share. Good luck on your journey! :)

    • @unknownman1
      @unknownman1 Год назад +2

      @@Deanin Thanks Dean, you are the best.

  • @martinarce8138
    @martinarce8138 2 года назад +1

    Worth mentioning:
    if (positionComparison & Node.DOCUMENT_POSITION_FOLLOWING) {...} in the setNewPosition function...
    It caught me off guard as I went for && instead.
    Really enjoyed this lesson! I think it helped me to connect some dots in relation to StimulusJs and sending data back to the server!

  • @martinarce8138
    @martinarce8138 2 года назад +3

    Man... When you said it's 5am and you were doing this really cool tutorial I went straight to buy your 10$ course... I'm very cheap and I almost never buy any courses but you absolutely deserve it.

    • @Deanin
      @Deanin  2 года назад +2

      Thank you! I really appreciate it, that means a lot. I'm still building it out, so make sure to check back every couple of days for extra lessons as I upload them. I'm hoping to finish the analytics lessons soon and do the drag and drop this weekend. I just keep finding new ways to track analytics with Ahoy though! 😅
      As for recording at 5 AM, yeah lol. It's really hot in my state in the US right now, and I don't have AC. So the only time I can work/record without boiling alive is really late at night. So I usually do my work during the day, take a nap, then work on the video from 12 until 9 when it premieres.

  • @JoshuaNeedham
    @JoshuaNeedham Год назад

    Really like the bit about updating existing data in the DB. Great example. Working on a drag and drop that updates an enum based on where they item is dragged.

  • @martinarce8138
    @martinarce8138 2 года назад +1

    I thought you were more revolutionary than just follow the rules!! Yayy! Thanks a lotf or your efforts!

  • @tombranson9341
    @tombranson9341 Год назад +1

    It's also possible using the event.target.dataset properties from the HTMLElement node instead of the globals. Then you could break down the object from the event like const { resourceId, url, parent } = event.target.dataset

  • @owensnyder3844
    @owensnyder3844 2 года назад +1

    So helpful. thank you for this

    • @Deanin
      @Deanin  2 года назад

      Glad it helped 🙂

  • @tombranson9341
    @tombranson9341 Год назад

    I think the dragOver method that returns true is from the OS such as Windows 2D Graphics library (while browser rendering libraries are only wrappers over the OS's graphics libraries), so that it prevents flicker and also tells the OS not to send other conflicting signals.
    You questioned, why not use a library for this? I know it's dependent on time in real projects, but personally I prefer to write my own code for something basic like this, since a) I have control over it, b) it usually weighs less (ie smaller and faster), furthermore, what is there to learn if just import everything and possibly import bugs that can't be fixed unless you make a pull request on a library you don't own.
    If you had wanted additional functionality to drag the items around with the up and down arrow keys, that would be a lot more complicated, since you'd have to determine how an item is selected like by clicking once with CTRL then it'd have to highlight the item and mimic a complete click-down-hold event and then use the arrow keys to "move" the cursor, etc.. that'd be difficult, and maybe if a library had all of these exotic features AND you wanted them, then just import a library, since the developers have done the work and tested it.
    I tried to make a custom model alert system, but that required a lot of code that listens for all kinds of events that can easily be messed up unless I had a more intimate knowledge of all the events that are possible (keyboard, keys, mouseclicks, etc...), so importing a library was easier.

  • @DevBishwasBh
    @DevBishwasBh 2 года назад +1

    Finally, thanks a lot

  • @matiasbg8747
    @matiasbg8747 2 года назад

    not is necesary create a models???