Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

9 Newbie

About Xristi

  • Rank

Profile Information

  • Gender
  • Location
    Phoenix, AZ
  • Interests
    Intelligent Tutoring Systems, Interactive Instruction, Educational Psychology
  1. Hi, Thank you for your quick reply... I created a CodePen @ https://codepen.io/storyproblemdoctor/pen/JjjbjJE
  2. Hi Jack, I am changing from hit-testing a draggable to using the liveSnap referenced above (posted 09/24/2017 ~ not sure I should use the poster's name) with my drag and drop functionality. How would your script change if the draggable is required to move on both the x and y axis? I have created a page that approximates yours but uses a grid to put the draggable and the target in two different rows. Currently, when the draggable has snapped to the target it snaps back to the target when moved positively along the y axis, but if it is moved negatively (up) the draggable does not return to the target as long as its position is negative relative to the target - just sticks there. When moved on the x axis it will return to its "home".
  3. Hello Zach, I was able to arrive at a solution. Between your comments and OSUBlake's and Diaco's codepens for multiple drag objects and multiple targets I was able to piece together some code that worked. Thank you all for your time in helping all of us grateful GSAP users.
  4. Yes. I get the x/y coordinates but the the tween doesn't complete. When I put your "this.x..." in the onComplete function x/y comes back undefined. Why would the tween not complete? Some other part of my code must be wrong...
  5. What is the code to access the x/y properties of the object being dragged. I've seen the x/y property used but it's always referred to as element.x. How do you use dot syntax with a div object that has an ID?
  6. Will this give me the object's relative position within its stated bounds? Might you give me an example of its use in a Draggable function? Thank you!
  7. No, and thank you for your almost instantaneous response! I will do it now...
  8. Hi, I need to get the current position of a dragged object on the completion of its tweening to another location. Here is my code: Draggable.create("#firstNamedQuanDragImage1", {type:"x,y", bounds:"#nQL_DragDropGrid1", edgeResistance:0.5, cursor: "pointer", onDragEnd: function(e) { if (this.hitTest(dropAreasArray[0], overlapThreshold)) { TweenMax.to(this.target, 0.5, {x:ecksPos, y:wyePos, onComplete:resetPermissionsArray_Target}); //disAbleTiles2("2nd"); studentAnswer = "EXPRESSION"; removeCheckAnsButton1(false); function resetPermissionsArray_Target() { var firstTileLocus_X = $("#firstNamedQuanDragImage1").offset(); var firstTileLeft = firstTileLocus_X.left; alert("location of first tile is: " + firstTileLeft); } With this code I get the object location just fine but the tween ends and the object does not continue to its desired x/y position If I remove the the onComplete and its function the tweening completes just fine but, obviously, no position info on the object. Thank you for your invaluable assistance - I'm getting there!
  9. Thank you, Julius! I'll put it in my functions file - won't have to ask next time...
  10. Yes!! Thank you. Well done...
  11. Is it possible to use TweenMax.delayedCall() to run 3 functions simultaneously? If not, can it be done with TimeLineMax?
  12. Hi again, Thank you so much for having this great forum! My first try at an interactive, drag and drop, section of most of my webpages was a disaster w/o GSAP. Then I remembered from my AS3 days (still do it) that these greensock forums had gotten me through a number of difficult coding and design issues. I also remembered that greensock and HTML5 were almost synonymous. I was able to figure out my question, but just having this site available gives me so much more confidence in my ability to learn HTML5 and its greensock applications. So, thank you, Jack, GSAP, and these forums!! I'm sure I'll be back. The new code will be posted to codepen shortly for anyone who is looking for a way to have multiple drag objects with a single drop area where the objects are prevented from being dropped on top of one another.
  13. Hi Jack and anyone else who read my first several posts w/o the codepen. Here is the comment and the url for the codepen is included. I have three draggable objects that I want to have the user place in a single drop cell (darker green). I can only move the first one to the drop cell then it "freezes", although I know it is still draggable as it moves slightly within that cell. The other two drag objects are draggable but only to a certain point within the target then they snap to the cell below them. If I can just get the drag/drop behavior to work - that would be great. I am a long time greensock user but entirely within AS3. I'm a total html5/css/js newbie. https://codepen.io/storyproblemdoctor/pen/qePjZv
  14. OK. It's a small section of a page that I have been working on as a separate object. I have been trying to make it work on my own since I posted and now it doesn't run at all. I'll post again when I've fixed it. Thank you so much for the attention you've given my problem. You're amazing!!