JHB

Interesting... I was saying docs, but I was referring to this page: Draggable Page. If you scroll down you will clearly see under methods it says 'disable( ) : Draggable', which to me at the time of reading meant it is an 'Object'. From there it all went wrong. I guess I was basically just very peeved that I forgot that 'create' intuitively returns an array. Then I realized it must surely be gsap's fault for not reminding me at the 'enable' method (hahahahaha). Regarding the cursor: There will be no minimal demo. I am simply not that interested in having it fixed (I polyfilled it) plus I have bigger problems with draggable right now. I will however offer you this if you really want to have a look at it, because it is wrong and more time should be spent on it in my opinion: Create div(foo). Create div(bar) inside div(foo). Make div(foo) draggable. Set draggable to 'allowEventDefault:true', 'cursor:default', 'activeCursor:dragging' and 'minimumMovement:6'. Give div(bar) an event that changes its cursor to pointer on mouseenter or mousehover. Capture the click event on div(bar) directly from the 'onClick' callback in draggable (very convenient). So now the cursor changes when you hover div(bar) showing you it is a button that can be clicked. BUT: when you click div(bar) the cursor becomes the dragging cursor immediately on mousedown. Why is this wrong? Well, because you set draggable to move at least 6 pixels before starting the drag. The cursor changed prematurely! It was a click! PS: The only way to really let the user know div(foo) is draggable in this case is to set the 'cursor:drag' option in draggable, but this ruins the entire thing because the cursor will now not even change when entering/hovering div(bar) anymore. Draggable seems to ignore 'allowEventDefault:true' for the cursor. Kind Regards Jayson

OMG! This question was asked in 2014 and till this day there is no mention in the docs of the fact that Draggable.create() returns an array. Even if you heard it before you would still try to just type myDraggable.enable() after reading the docs. Please update the docs to reflect this clearly everywhere it will be an issue. I wasted so much time on this. Whilst I am ranting: The cursors are not working correctly. If you allow an element on the draggable to be clicked and then catch the click event, the cursor should only change to say 'dragging' once you have moved the mouse the amount of pixels that constitutes a drag and not a click. Kind Regards Jayson

@OSUblake Just quickly getting back to you cause I am in and out of meetings all day today. Yes onclick is bad, but that is not an IE problem in this case. Add the draggable code, and that image I provided is what you get. Remove the draggable code an IE behaves very nicely. I mean the entire top toolbar disappears! Then when you drag what is left, it gets the natural translucent IE drag image. That means IE simply ignored draggable completely. Also, all my SVG's have height/width and a viewBox. I used to code SVG only HTML Applications (.HTA) for IE9 on the WIN desktop. I literally pop out hundreds of them in that time. Can you imagine how very surprised I am that IE is the only browser that has a problem here. My style of coding is geared towards making IE9 and up happy. Now... I would like to suggest the moderators think about allowing a secondary method of code communication for flexibility. I humbly suggest that you also allow people to upload a ZIP file containing a small CSS/JS/HTML file that you can then pop into your browser to see the problem. At least in a browser you see the truth and have all the power of the Inspector at your fingertips. Then pens can be posted only as a benefit for others to see the solution in action. It will make the posts on here much smaller as a side benefit. Enforcing this pen stuff so rigorously has made me give up on getting any help in here regarding draggable (at least for my current project). I mean, just read up. Every response to me is: "We really want to help you, but...". Just a thought gals/guys, please. Kind Regards Jayson

@Zach: Sorry, but I already deleted that code and started from scratch before you asked me. In hindsight I could have posted it here, but I was so angry at IE for ruining my day again. All I can offer you is a screen shot so you can at least see I was not just imagining it. I have 4 monitors so quality will have to suck to qualify for upload size maximum, but here's the layout: 1 FireFox 2 Edge 3 IE and 4 my desktop. PS: I had to block stuff (red areas) to protect the privacy of my client. @OSUblake: What your image is showing is what I coded and that works. Drag it by that dark path and you will see behavior that is not the same as it is in my browser. I can drag it by that dark block in the browser, but not on codepen with exactly the same code. Also, when I said the svg elements not showing I meant after I incorporated the scroll for the top row with a lots of dark blocks. This I did not add that to the pen, because it will not let me save it again. Kind Regards Jayson

Hi Zack I have pretty much given up on draggable for my current project. It does not display any SVG elements I put into a draggable in IE11 on win10. As soon as I remove the draggable code there is no problem. I think my draggable code is just fine, as can be seen from my previous post. Edge and FireFox has no issues with the same code. Right now I am merely answering everyone who responds here, because I want to be accepted in the tribe one day when I am grown up and have another question. As for your second concern: I don't know what is going on. I click on my pen here (link in first post) and it takes me there. Then my username is in the top left corner (cause I created it). When I make changes and try to save it I am told that I need to log in. So I try that, but alas there is no option to log in using facebook like it allowed me to do in the beginning when I joined and created that pen. Now I click on my name in the left corner and after a warning that I will lose all changes, ho and behold, here I am in my account profile. I can make changes to the profile so the site has me logged in at this point. Now I click on the pen from there. Same thing happens when I try to save. Kind Regards Jayson

Hi OSUblake Ahh... I see. No wonder I could not figure it out. It is exactly the opposite of what I need. I have in the meantime played with draggable some more and implemented the following: I can now drag & drop the drop target SVG as I could before, but I can also scroll the blocks in the top strip (left & right) when they don't fit in the innerWindow's width. I have not implemented it into the codepen cause I find codepen frustrating and struggle to stay logged in at this point. Here is the code I used in case you would like to see it: var Element=window.document.createElementNS(window.CM.constantData.webSVGNSPath,'g'); Element.setAttribute('id','buttonGroup'); toolbox.appendChild(Element); Draggable.create(buttonGroup,{ type:'x', bounds:{minX:((1220>window.innerWidth)?window.innerWidth-1220:0),maxX:0}, zIndexBoost:false, cursor:"default", activeCursor:"grabbing" }); I added all the buttons to buttonGroup . Now I need to figure out how to make draggable change its mind and start dragging the single button in the group I grabbed when I drag down and out of the SVG element. I think it will not be possible. Kind Regards Jayson

Hi OSUblake I will just answer one of your comments, because it seems important. Quote: It's the drop area where the scrolling works. Not the container with the images. I tried the drop area. It simply starts selecting the text. To fix the text selection problem is a whole another workaround to get that to stop in all browsers. It seems we are getting nowhere. I want to believe that draggable is as powerful as I have read it is, and I will, as soon as I can prove it to myself. For now however I should probably move on with the project before I get dragged out of the company by my ears. I have the uniquely punishing task of updating code I wrote 4 years ago. Thanks for all your comments. Kind Regards Jayson

Hi OSUblake I will try to address some of your concerns: Quote: Why are you using SVG? That's going to add another layer of complexity. This is going to be a predominantly SVG driven website. I apologize but the codepen does not make this fact clear since it is only a snipped. Quote: It sounds like you are trying to make your own scroller with SVG. Not sure why when the browser can do that for you. And draggable has an autoScroll feature. You are incorrect. I was trying to use a gsap feature called draggable to do something I always do in normal javascript myself, in order to reap benefits like smooth animation all in one go. Usually I code the scrolling stuff myself and then use TweenMax at selected points. This is a lot of micro-management that I thought draggable would simplify. Quote (From your first 1st CodePen): As of version 0.12.0, Draggable has auto-scrolling capabilities! You will notice that it still drags the item clicked on only. I need it to grab and pull the entire list in the direction of the scroll without making a copy, then only start to drag the item clicked on if you move out of the container. You are basically accusing me of trying to create a scroller for SVG, but it is much worse than that. I have already created said scroller and have been using it with TweenMax (animation) for a long time. I was merely hoping the draggable plugin would simplify that code. Quote (From your 2nd CodePen): This demo uses autoScroll, but for HTML, and it probably needs some work. I could not get it to scroll, even in CodePen. Quote: And for codepen demos, please use a simpler coding style. There is no need to define properties for a demo. My apologies. I used code from a snipped I copied onto a memory stick at work. I did not want to change too much, since some things already did not function the same as at work with the code as is in CodePen. For instance I cannot drag the drop target SVG if I click on the path it contains. At work this works fine. I did not want anything else to change for the sake of short code, cause then when I deploy a solution gotten here at work I will have to come right back, because it does not work the same there. My other clients enforce a different code style so my code will not always look like this. Quote: I'd also recommend using x,y instead of left,top for Draggable and using v3 of gsap. I originally did use x,y in the beginning but ran into problems animating the view back into the window after the drag - if needed. I think I just changed because I did not understand at the time that x,y is the transform coords. I will have another go at x,y later. I hope that addresses all your concerns and thanks for the suggestions. It may be better in the end to use my current code and not use draggable at all. Kind Regards Jayson

Hi Jack Thanks for the response. I will try to create a codepen later when I get home, since here I can't. I know I wrote a lot, but in case it helps I will simplify for now: Two svg elements with svg->rect(s) on them. The rectangles from the one svg can drag onto the individual rectangles of the other. This is the simple part. The drag origin svg must scroll rectangles out of bounds into view and only start to drag when you leave its area. BTW: The working example that OSUblake created is the fifth post in that thread. It shows the dragging, but does not allow you to scroll the items in the original to spare you the painful process of using the scrollbars to bring the letter you want into view. Anyways... Lets see if I can get the codepen done. Kind Regards Jayson

Hi Seeing as this is my first post ever I hope it will be satisfactory as far as forum rules go. I used gsap a long time ago when it was just launched in javascript format and loved it instantly. Unfortunately now a lot has changed in my absence, and I am struggling. I will try to explain my problem since I cannot make a codepen project at this point. Luckily there is another post with many codepens on that explains what I need. It can be found here: OSUblake did an amazing job helping MattE to solve his problem. I however am trying to take that to the next level, but draggable has got me all confused. This after I finally convinced my client that $150 is not that much annually for what he will gain, and now I cannot even make the example they asked me for. hahahahahaha. Further information just in case it is needed: I have successfully implemented draggable on the svg element that will receive the dragged items, since that svg along with its paths can be dragged anywhere on the screen. It has svg rectangles on it that will act as drop zones for what is being dragged to it. The container being dragged from will be a stationary svg element at the edge of the screen like a strip or toolbar, overlapping the receiver svg. Now, in the above post OSUblake made a scrollable div from which you can drag and drop other divs (It looks fantastic). I am however trying to add the following features: No JQuery if at all possible. (Makes you a translator first and scripter second.) The drag item container must not have a scrollbar. (As explained above it is actually an svg element with paths that can be dragged to another svg element's paths but that is besides the point right now. I would like to mention that I am animating custom left/top properties on the paths currently and updating the d attribute during animation from callBacks which may not work with draggable) When you start dragging but stay in the container going only in the direction the container scrolls, it must not drag but instead grab all items and scroll them revealing the hidden ones like is common on phones/tablets. (For me the items immediately start dragging (copy of themselves) and then I am stuck. I found some stuff in the docs that can lock direction after you scroll for a bit, but it is not viable for what I need. It must basically want to scroll the container first and drag if you leave the container) The items in the container element must not be removed during the drag or after the drop. (I will figure out what was dropped from one of the callBacks and draw the correct item on the receiver.) Any advice will be much appreciated. Kind Regards Jayson EDIT: I have now made a codepen with as much of the code in it as I can remember: Let me know if it is helpful or what I need to add to explain it better. https://codepen.io/jayson-hans-bourne/pen/qBbxzLw