Jump to content
GreenSock

katerlouis

Looking for ideas to create calendar items via click and drag. Is that a job for Draggable?

Recommended Posts

Eingefügtes_Bild_17_03_22__11_44.heic

 

I have a vertical timebar (see screenshot; I could only upload heic because 19kb max upload size is.. well.. challenging :D). The user should be able to create an item by clicking somehwere and drag in 15minute increments. I'd like to use Draggable for that but am honestly a bit confused on how to go about it. As I understand Draggable right now, it's intended use lies in manipulating existing elements. 

 

But for my usecase we would need to create a new item. 

I'd still like to use Draggable, because snap, bounds and autoScroll is already solved here and seems very robust!

 

I'm working with Vue, so maybe Draggable can be used on the timebar (the bounds) itself to manipulate state for the new item without actually moving the timebar?

 

Appreciate suggestions (or more likely... existing solutions I've just missed in the forums and on codepen :FFF)

 

Thanks!

René 

Link to comment
Share on other sites

How many times you gonna change your name? 🤣

 

Did you still need help with this, or did you get a good idea of how to go about this from the demo in your other thread?

Link to comment
Share on other sites

42 minutes ago, OSUblake said:

How many times you gonna change your name? 🤣

 

Did you still need help with this, or did you get a good idea of how to go about this from the demo in your other thread?

 

I've changed it once! And I don't see any reason to do it again :D

 

Unfortunately I still need some help to get a good concept in creating a new item like this "on the fly".

Having an invisible ghost there that's being dragged or something doesn't feel right. And I can't find a way to "not actually drag" the main timebar (the bounds for my items) but rather "just use the Draggable framework and events to manipulate some state".

 

Maybe there is a way to make the timebar draggable, without applying the transforms? And of course onRelease all internals (y position etc) should be reset for the next possible drag to create a new item.

 

So, as you can see I could need some of that blakicious magic dust :)

Link to comment
Share on other sites

53 minutes ago, katerlouis said:

So, as you can see I could need some of that blakicious magic dust :)

 

It's on backorder due to supply chain issues. 

 

So are you trying to create an element when you press down and then have it immediately draggable? If can make a basic demo kind of showing what you are trying to do, that help out a lot.

 

  • Like 1
  • Haha 2
Link to comment
Share on other sites

 

Sorry for the misunderstanding; a video is a great idea.

I basically want to recreate how most calendars work:

https://www.dropbox.com/s/0gjp4c34bhyer2c/OSUBlake is best <3.mov?dl=0

 

I've already have the easy part done: dragging and dropping the item as a whole. Whats left is dragging the edges and therefore changing the items duration. I guess I'll manage that aswell. 

 

The topic of this thread is adding new ones (first action in the video) 

 

@Carl That's not quite what I'm looking for. I don't want to clone items (yet :D) – right now I need to create them out of thin air :D:D

Link to comment
Share on other sites

1 hour ago, katerlouis said:

That's not quite what I'm looking for. I don't want to clone items (yet :D) – right now I need to create them out of thin air :D:D

 

Cloning is the same thing as creating a new element, component, or whatever you are working with.

 

See the Pen JjMGroX by GreenSock (@GreenSock) on CodePen

 

3 hours ago, katerlouis said:

Having an invisible ghost there that's being dragged or something doesn't feel right.

 

So no hidden elements. Hmmm.... let me get back to you on that. I want to test something out using something that is going to be in the next GSAP release. 😁

 

  • Like 1
Link to comment
Share on other sites

let dragger = new Draggable(item);

dragger.startDrag(e);

that looks promising. I didn't know you could create a draggable like that and start the drag by hand. 

 

But still.. since I'm in a Vue application, I would like to avoid things like `document.body.append` or `template.clone` – Vue likes to keep rendering in its own hands, based on state etc. – 

 

Surely there must be a trick to start a drag without having an actual item to move, right? :D

 

Really curious what Blake is cooking up here 😎

Sneak peek for future versions is always fun.

 

Thanks!

Link to comment
Share on other sites

DM sent 😉

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×