ncou

Now you point it, it's made sense the problem came from the orientation parameters. Thank you both for your help and your quick answer.

Hi, I am experiancing troubles when i activate the autorotate param on my canvas animation. Here is the code pen : http://codepen.io/anon/pen/gLpwgm?editors=0010 You can enamble ou disable the autorotate param if you comment out the 1st or 2nd lines. I have 5 coords on my example (it's the 5 circles), i have add a red line to join thoses points to represent the curve. I am expected the pictore to follow (more or less) the line. Without the autorotate i got the picture to "stick" on the line. But with the autorotate parameter activated, the picture seems to fall at the third point. Why the autorotate param mess the tween ? am i missing somethink ? PS : I tried with a bigger segment value, but without success.

Hi, Thank you for your quick answer. The codepen is quite complexe (and a very good example from Blake), I understand the clone disturb the first click, and it's work on the second click. But it's still a bit obscure. for example, the "onDrag" or "onPress" events are catched on the clone, so why not the onclick ? There is also the case when you add a custom click event on the original object, and it's not called (from my comprehension, if you use the jquery ".clone(true)" function it keep the event, so the custom click function from the original item should be passed to the cloned, and at least fired when you click on the clone ? no ?). I got a working workaround for my problem, but i am interested in your answer from my previous questions (sorry for my poor english). PS : here is the workaround (store the mouse position before the drag and check at the drag release if there a is a delta of less the 2 pixels, it's a click we fire the original click event) : PS2 : if there is a more clean workaround, let me know. Thank you for your help, have a good day. function startDraggable(event) { .... window.draginfo = {x: event.pageX, y: event.pageY}; function dragElement(e) { // check if the tile is moved (if not moved we can use this to detect a click) if (!tile.moved) { var x = window.draginfo.x - e.pageX; var y = window.draginfo.y - e.pageY; if (!(x < 2 && x > -2) || !(y < 2 && y > -2)) { // if the mouse cursor move more than 2 pixels (on X or Y axis), we consider the tile is moved tile.moved = true; } } function dropTile(e) { ..... // check if the element is only clicked if (!tile.moved) { // fire the original "click" event on the object tile.element.trigger("click"); }

Hi, I got a problem who is driving me crazy. I try to made a draggable element "clickable". In the documentation this seems easy, you need to define the onclick function, and add the boolean "dragClickables" as true. I made a quick fork from an existing codepen to add a onclick function with a console.log message. http://codepen.io/anon/pen/KgpPrR?editors=0010 I get the "onclick" event to fire but only if i double click can you point me my mistake ? Thank you. Keep up the good work, your library is awsome !

Thank you for your help. I nearly made what i have in mind I still got a gap of a few pixels when i try to position my clones (if the zoom page is above 100%), but it seems like a subpixels issue. For the autoscroll on the left list, i used a workaround. You solution is really clean but is was hard (for my level) to include in my website. I used some div on top and bottom of the scroll list (this simulate a shadow to understand there is items below) and i simulate a scrollTop+1 when i drag the clone on this div (to scroll dow/up the tag list), not yet perfect but it's working. Thank you again both of you, and for the time you spend to answer my issue. Here a preview of what i was trying to do with my modal and scroll list.

nice piece of code ! Thanks for your help. I will analyse it and try to apply it.

Thank you, it's better but not yet perfect. I made the positionning OK, but : 1) i can't made the left list scroll down if i want to drop a picture on a tag div who is below (example on TAG8). I tried to mix a scrollTo when the onDrag event is fired but without success. 2) Is it possible to made the clone outside the div ".sl-popup-body" ? the clones will be in a modal popup, i want to made then move freely outside the main div. If i change the "var container" with the main div modal popup, will this work ? http://codepen.io/anon/pen/BKEYpG Sorry for bothering you with my noob questions.

Hi, The clone solution seems to work better, now i can move it outside of the scrollable div. I am trying to use your example (i made a grid instead of an horizontal line), but i got a ****** result i can't put the clones on the original div picture. My goal is to move picture on the left tag list. And the clone disapear (it's working only for the first 2 tags, i can't move the clone on the third tag), and the original picture should stay in place (this seems to work). => I made a codepen example. I got on the left the clone and on the right the original picture... I tried with a flex display to overlay both div, but without success. Can you point me my mistake(s) ? http://codepen.io/anon/pen/qZggMM Thank you for your help.

It's look like this could solve my problem. I will try to made a test in the day to see if this solve my problem. PS : I played with you demo because i want this : once i drop my item i want to keep it in the top list, but actually it disapear. I disabled a few tweens so i still get the element visible, but when i drop it in the target zone, the letter is removed from the list i can't find in the code where the hide is made. any idear ? Thank you.

It's the overflow:auto who are causing the problem. But i can't change this, because i got a list of picture (on the right panel), and i need to move them on the tags label on the left panel Everithing is in a modal popup. Any idear to bypass this problem ? or you think there is no workaround ? Update : I made another codepen, it seems it's more the "position:relative" who is the problem. If i change in the ".media-library-list-item" the position to absolute, the drag work correctly. if i change it to "relative" i got the problem. In my projet i need to use the relative position because all my thumbnails needs to be aligned in my grid. http://codepen.io/anon/pen/GZzJmb in this codepen the cat div work fine, but the red div not because i removed the position attribute in the ".box" style.

Hi, I got a problem with the drop target function. I made a codepen example to illustrate the problem : http://codepen.io/anon/pen/qZLwrr It work fine with the red "picture" box => when i want to drop it on the tag box, the div is on top of everything. but with the "kitten" picture box it's behind the left panel when i try to drop the picture on a tag label box again It work fine if i remove the "position : relative" attribute or the overflow: auto; attribute, but i don't think it's coming from here, because if i try to test it in my site web, i still have the problem. Can you help me on this problem ? Thank you.

You are powerful !!!!! You are right, if i move the "create draggble" after the append, the drag is correct. http://codepen.io/anon/pen/dMqrwm Thank you very much.

Hi, First, very nice plugin. I try to use GSAP draggable with the "autoscroll" option, but there is a problem when I scroll down a tile the position is not correctly updated. You can check in the following codepen demo : http://codepen.io/anon/pen/dMqvQx It's seems to me the problem come from the "position:absolute" in the .st-menu CSS style. If i remove this property the draggable autoscroll seems to work better. But i can't remove this attribute in my site because it broke my menu. Is there a workaround for this issue with the autoscroll option ? Thank you. Keep up the good work.