Jump to content
GreenSock

hugonoro

Members
  • Posts

    16
  • Joined

  • Last visited

Posts posted by hugonoro

  1. Hi Dipscom,
    so I've setup a very simple example that tries to reflect the issue I'm facing.
     
    So when the line 6 is not commented

     $('.box').attr('data-clickable', true);

    if you click the element you see it becoming selected and if you ctrl + click you see it becoming unselected.

     

    But you can no longer drag the element. 

     

    If you comment the same line you can drag the element but the expected functionality of selection is no longer working.

     

    I'm assuming somewhere down the line the click event is being swallowed. As you can see in my example I'm not manipulating any events. Hence my conclusion :) .

     

    Let me know what you think.

     

    See the Pen WRVXYd by hugonoro (@hugonoro) on CodePen

  2. Hi Dipscom,

    thank you for the reply.

     

    Yes I am aware of the events and I've done a few advanced options already. But the problem seems to be with the click event itself. 

     

    So basically with Jquery UI Selectable, when an element is mouse clicked, it's state changes to "ui-selected". Meaning, the element needs to be listening to the click event.

     

    I was trying to allow the draggable to be clickable (triggering actions on click) by setting the draggable=true attribute. But this kills the ability for it to be draggable.

     

    Apparently the regular OnClick event is hooked up when the mouse clicks but it seems that is not bubbling up, so it's not being captured by the Jquery UI selectable.

  3. Hi Guys,

    I'm trying to achieve something but I'm a bit stuck.

     

    So I'm trying to integrate the Jquery UI selectable with the Draggable. Basically I want to be able to tell an element is clickable (I know I can set the draggable=true attribute) and draggable at the same time. Is this possible?

     

     Do I need to create additional layers on the element? The goal is to visually only appear to be 1 element (for instance an image, a thumbnail, etc.)

     

    I hope it wasn't too confusing :)

     

    Thanks,

    Hugo Noro

  4. Hi Guys,

    I'm trying to achieve something that probably is very simple but I think i surely missing something.

     

    So let's say I have a draggable in the position x:800 y: 200

     

    Now I drag it to the position x:500 y:100, and after releasing the draggable, and from this point onward, I want to make the origin of the draggable this last position. So all the transformations would be applied from this last position.

     

    I hope my explanation makes sense :).

     

    Is there a simple way of achieving this?

     

    Thanks.

  5. Hi Blake,

    that's perfect.

     

    I've reached a solution where I was creating some constraints for the elements size but this solution is exactly what I was looking for.

    Thank you very much for your help.

    • Like 2
  6. I did, the problem with that is that I don't want the handle to move to the left of the element otherwise it will make the element disappear. That's why I'm struggling with this, from the beginning. I need to be able to define a minX So I can never allow it to be smaller than a specified size. The whole Idea is never let the rectangle be smaller than a specific size. Otherwise, yes, your suggestion would solve it :)

  7. You're absolutely right.

     

    OK so I've created a small codepen to try to explain it better.

     

    So in the following codepen if you try to drag the rectangle you can see it will be bound to the limits of the grid.

     

    The problem is when you move it, for instance, to 2/3 to the right of the grid, I would like the rectangle not to be able to expand to outside of the grid.

     

    The rectangle is bound to the "container" grid. But I would like to define the bounds with a {minX, maxX} so I can define minimum size. By doing this I've not been able to restrict the growth of the rectangle to always be inside the grid, independently of its position

     

    Makes sense?

     

    See the Pen GNXOyz by hugonoro (@hugonoro) on CodePen

    • Thanks 1
  8. Hi Guys,

    I know it's been a while since this discussion is started but I'm struggling with a couple of small issues.

     

    I've followed OSUblake examples to create a resizable draggable. All is good in that part.

     

    My problem now is that I'm trying to define bounds on it but it's being a pain because on the examples provided (basically a child draggable inside a parent one, when dragged expands the parent - 

    See the Pen EaXNMd by osublake (@osublake) on CodePen

    ) the child draggable resets it's coordinates, as expected, every time the parent one moves to a different place.

     

    To create some context, based on the example provided on the codepen created by OSUblake, I'm considering the parent draggable the square and the child draggable the expand handle.

     

    How would you suggest a simple solution for creating bounds for the whole group. Meaning I would still be able do drag around the square but I don't want it to be able to expand to outside of a specified limit. Remember the handle draggable resets it's x coordinates every time we move the square.

     

    To make simple I'm only expanding over the X axis.

     

    Any help on this would be brilliant.

     

    Thanks.

  9. Hi Guys,

    I've started working with GSAP a couple of days ago and I'm really impressed with all the potential.

     

    I'm trying to achieve something that I don't know if it's possible to do out of the box. Usually I assume I'm the one missing something :)

     

    So basically I have a container with a couple of draggables on it and what I was trying to do was on hitTest -> true, to make the element return to the position it had before.

     

    I've managed to make this work very easily and send the element to the origin. But I'm struggling a bit with sending it to the previous position.

     

    So let's say we have a draggable element on the initial position A  x:300, y:0. Then I drag it to the position  B x:200, y:100. On the position x:200, y:125 (consider each element of the grid 25px) there is one element which I will collide with. 

     

    I want my draggable element to return to the position B x:200, y:100. But to be able to that I would have to do maths and calculate the previous position based on the drag and the grid cell dimensions. Or am I missing something? (I hope so :) )

     

    Can you give me a few pointers on how to achieve this goal?

     

    Thank.

×