Jump to content
GreenSock

cemycc

Drag new element from the div

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello, 

 

I have a list of divs and when the user want to drag the div I want to create a new div and that div will be draggable. The main div will keep his positions. 

 

How can I make this with the Draggable plugin ? 

I was trying to add a mousedown event on the main div and on that event I create the element and attach the Draggable event but is not working as expected, the user need to redrag that element to work.

Link to comment
Share on other sites

Hi

 

Why don't you try with the onDragStart event. You could attach a function that adds the new element to the DOM and create the Draggable instance as well.

 

Unfortunately I can't post any code for now.

 

Hope this helps

Rodrigo

Link to comment
Share on other sites

I was trying that now, but I still need to drag again the element. 

On DragStart I create the new div then I insert the div in dom and I move it at the position that I want and I create a new draggable event on it but to work I need to go over it again and drag it.

Link to comment
Share on other sites

Hi,

 

Take a look at this codepen and tell us if this is what you're after. If not please fork and adapt it to your particular scenario in order to have a better idea of what you're trying to achieve:

 

See the Pen Jlfsq by rhernando (@rhernando) on CodePen

 

Best,

Rodrigo.

Link to comment
Share on other sites

Hello,

 

Thank for your answer and the code.

Is not what I want, I have edited the pen so will ilustrate exactly what I want.

The problem is that when I press the mouse down the new element need to be dragged again and I want to be dragged from the first time after I press the mouse down.

See the Pen uwEKJ by anon (@anon) on CodePen

Link to comment
Share on other sites

Hi,

 

What you could do is add the element to the DOM before any mouse event with an opacity:0, visibility:hidden, the same position of the visible element and create the draggable instance for that element on DOM ready. On mouse down tween it's opacity and visibility and onDragStart you can add a new element with opacity 0 and visibility hidden, like that you might not need the second mouse event.

 

Best,

Rodrigo.

Link to comment
Share on other sites

Hi,

 

I've updated the codepen:

 

See the Pen Jlfsq by rhernando (@rhernando) on CodePen

 

I hope this is what you're after.

 

Best,

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Thank you, yes it is but the problem is that the new element can be smaller or larger and there are other elements near it ( like a list ) so they can overwrite the z-index if they are larger.

To fix it I will need to make only the width/height of the base element to be draggable on the new one and after that I can move it to have the mouse pointer on center. I will need something like dragFrom: (0,0) to (x,y) or similar .

 

If there is no solution I will need to make with mousedown(create element append), mousemove(move the element) .

 

Thanks again for your time.

Link to comment
Share on other sites

Hi,

You could try with trigger (check the API docs) but I don't know if it can be updated after the drag has started.

Another way could be by playing with the overflow property of the containers and the callbacks, perhaps onDragEnd take the Draggable target outside the main wrapper or simply set edge resistance to 1.

 

Another choice would be to create the element record it's width and height, use a set instance to match the parent's size and when you tween the opacity to 1 also tween the height and width and use an overfloe:hidden property value.

 

I'll tinker with the cordepen later to use the width and height approach.

Maybe Carl or Jack can offer a better approach.

Best
Rodrigo.

Link to comment
Share on other sites

Rodrigo has done a fantastic job of trying to find a solution to this unique problem. His latest codepen example was a very clever approach to dynamically creating a draggable div on click. 

 

Unfortunately its a bit much to keep up with trying to solve unique problems that are outside the intended functionality of a product when new requirements keep appearing, like the new draggable item may be larger or smaller than the item you clicked on. 

 

Draggable's beauty is in how simple it is to implement. Tell Draggable what item should be draggable and as soon as it is dragged... it works! 

 

From what I gather you would need the current API to allow you to create a Draggable that has a startDrag() method which can be called without the user actually initiating a drag gesture with mouse or pointer. 

 

As you pointed out it might be tricky to configure the pointer position in relation to the Draggable object. Should the Draggable's center be positioned where the pointer is? Should there be a custom x/y offset? Definitely things to consider.

 

We'll let you know if adding a startDrag() is something that is feasible.

 

 

Link to comment
Share on other sites

Oh, I think you are right. on the startDrag event (mousedown) I just change the width and height and opacity at the same time. I don't know why I haven't think at it. And after I change the width/height I move the element to match his center with the mouse position using set function.

When I am home, I will test it. 

 

Carl you are right to get the draggable's center to match the mouse position is tricky, the only method I figure it out to get it working is setting the draggable's element to position absolute.

Link to comment
Share on other sites

  • 2 weeks later...

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.
×