Jump to content
Search Community

luke_nukem_3d

Members
  • Posts

    8
  • Joined

  • Last visited

Everything posted by luke_nukem_3d

  1. I'd say Draggable (and the rest of the GSAP libraries) give you the tools to do pretty much anything, it's highly flexible and performant (plus really good browser support). If you just want to do something simple like a sortable list reordering, there might be better options out there which will quickly satisfy your need without you having to write much logic, but as soon as you want to 'go down the rabbit hole' and the use cases become more complex, GSAP gives you the tools to make it happen.
  2. Hey Jack, Tried with the code above and works like a dream ⭐ ? Thanks so much for listening to the use case and providing such a quick and positive response! I hope it won't catch other users off guard as it seems more intuitive to me, but I understand why you didn't have it setup that way before. Do you know when the previewed version will be released/come available through NPM? No rush, but just so I know roughly when to check back in so I can upgrade and complete this bit of work. Can I also just say thank you for all your hard work in making such great libraries, they really are brilliantly done with great API's and with such good browser support too. No mean feat and you guys have nailed it! Not to mention the responsive support you offer through these forums, it really is a rare thing.
  3. Hey Zach, Thanks for getting back to me. I would have thought the use case is a pretty common one, but maybe not. We run acceptance (end to end) tests on our apps. In this level of testing, we boot the whole application for each test and then interact with the app, as a user would, so that we can make certain assertions against those actions. A vastly over simplified example could be the code above i.e A user loads the page, they click on the square, this turns the square blue. To be clear, I'm not looking to trigger the click event programatically from inside the application logic, only the tests. We use Draggable quite extensively and so a lot of our user journeys might include clicking on a draggable, which under normal circumstances would trigger something happening. If you start reaching into the code to call a particular function at that point, it starts making the tests less meaningful. Equally if I'm to attach a listener during the test, then were another developer to remove the onClick handler in the actual code, we would never know from the tests that the functionality was broken, because we're setting the test up to succeed whatever happens. I don't mind digging into the code to try and figure out why, but was wondering if any of those more in the know might be able to shed a little light as to why the Draggable onClick() doesn't fire when triggering a click event on the draggable element, it felt intuitive that it would, but I guess there must be a good reason that i'm missing. Knowing this might help me figure out the best workaround for our use case. Thanks again for any help or guidance you can offer, really appreciated.
  4. Hello! We recently upgraded to the latest GSAP (jumping a major version) and have got a problem with some tests failing since. During some of our automated tests we need to be able to click on draggables, and have the `onClick` action fire for certain behaviour to happen which can then be asserted against. Unfortunately, the Draggable's `onClick` listener does not fire upon a click event. I have attached a codepen which I hope shows the example clearly. It sets up a Draggable with an `onClick` listener which should turn the square blue when it is clicked. You can try this manually to check the logic works. It also has some code which just fires a click event on the draggable element. You can see that this does not turn the square blue. I'm certain there is a reason (potentially to do with it differentiating between clicks and drags) that this doesn't work, but wondered a) If it should work b) If not, whether there is a reasonable workaround we could use for our automated tests to trigger clicks on Draggable elements. I have also tried with different more granular events i.e mousedown, mouseup etc. but still no joy. Thanks in advance for any help you might be able to offer, and let me know if anything isn't clear so I can provide better examples. Luke
  5. Hi there, I am trying to figure out a way to write automated tests for my drag and drop implemented with the Draggable library. A couple of questions really. Is this using native events under the hood? Are there any solutions or examples of people writing tests that work for draggables? Are there any helpers provided from the libraries that might aid me in this? Thanks, Luke
  6. Brilliant that looks perfect, thanks so much for your help, will try and implement this in my scenario. Can i just say, really appreciate the quick help you guys offer. Absolutely brilliant.
  7. Hi Carl, thanks for your quick reply. The demo is rather a simplified version of the actual problem (which does not involve the behaviour with the hovering triggering the expansion), it was just a way of recreating my actual problem in a very simplistic fashion. My actual use case, does use the hitTest() method to determine whether the container should expand or not, and that part of it works very smoothly. Its just that if that container expands by a large amount then your draggable object is suddenly nowhere near your mouse pointer. Due to the way that my data is bound to the DOM elements, its not really possible to position the Draggable object absolutely, although I can see that would be a possible solution. Apologies for the over simplified Code Pen as I think it caused some confusion.
  8. Hi there, I'm having what I would have thought to be a common problem, but can't find a neat solution to it. I have created a simple recreation of it in the code pen below. Try dragging the blue draggable into the grey square, and when you are over the grey square allow the mouse to come outside the draggable slightly which will let the grey box expand. When the box expands the draggable is now far behind the pointer (probably the distance the box has expanded). I want to get the draggable to catch up with the mouse pointer. Have tried tweening by a calculated distance in the 'onDrag' hook, but this seems to cause it to keep jumping back and forth. Thanks in advance for any help anyone can give me, really appreciated.
×
×
  • Create New...