Jump to content
Search Community

Draggable items in a scrollable div (renewed)

JHB test
Moderator Tag

Recommended Posts

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.

See the Pen qBbxzLw by jayson-hans-bourne (@jayson-hans-bourne) on CodePen

Edited by JHB
Added a codepen.
Link to comment
Share on other sites

Welcome back, @JHB. First of all, thanks for convincing your client to go "Business Green". We sure appreciate the support. 
 

Is there a particular reason you're not able to provide a CodePen? It's just really difficult to discern what you're asking, what the context is like, where the problems are, etc. Frankly, this kinda sounds like a full-on consulting project rather than a simple forums question. We love helping with GSAP-specific problems. Perhaps it'd be best if you isolated some of your questions instead of combining them all into a single big post with a list of requirements. You'll GREATLY increase your chances of getting a solid answer here if you can provide a simple CodePen. Again, it does NOT need to be a fully-functional version of your actual project. It's best to strip out all non-essential code. Like literally just show one <div>  if possible and show how you're trying to drag or what the issue is with the scrollbar or whatever.

 

We'd love to help - I'm just not sure where to start here and I can't see any context. I'd rather not parse through a thread from the distant past with 38 posts and try to guess. :)

 

Or maybe @OSUblake will swing by and know exactly what you're talking about. 

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Why are you using SVG? That's going to add another layer of complexity.

 

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.

See the Pen YPvdYv by GreenSock (@GreenSock) on CodePen

 

This demo uses autoScroll, but for HTML, and it probably needs some work. 

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

 

And for codepen demos, please use a simpler coding style. There is no need to define properties for a demo. It just adds noise, and makes what's going on harder to understand.

 

I'd also recommend using x,y instead of left,top for Draggable and using v3 of gsap.

 

 

 

 

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

4 hours ago, JHB said:

I could not get it to scroll, even in CodePen.

 

It's the drop area where the scrolling works. Not the container with the images.

 

4 hours ago, JHB said:

I have already created said scroller and have been using it with TweenMax (animation) for a long time.

 

If you've already created a scroller, and it's all done with svg, then it sounds like most of the stuff in those demos probably won't apply to your use case. Those demos were to show how to drag something out of scrolling container because you literally can't drag something out of it. But if you're using SVG, you can certainly drag stuff anywhere as long as overflow is visible. If you need to clip stuff, you can use a clipPath or mask.

 

4 hours ago, JHB said:

I was merely hoping the draggable plugin would simplify that code.

 

Draggable can definitely help simplify a lot of code, and it's been battle tested to handle a bunch of different edge cases.

 

20 hours ago, JHB said:

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.

 

My first thought would be to create a clone of what you dragging, and then manipulate the viewBox to move the items in the direction you want it scroll. If not the viewBox, then make sure everything is inside a <g> element, and translate it.

 

You can read the deltaX and deltaY properties in your onDrag callback, and use those values to scroll your container if need.

https://greensock.com/docs/v3/Plugins/Draggable/deltaX

 

 

  • Like 5
Link to comment
Share on other sites

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

Link to comment
Share on other sites

30 minutes ago, JHB said:

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.

 

You drag and drop.

90c81d57a2d4f01a60a53b6bf5cc161d.gif

 

Demo from this thread.

 

 

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

If it's possible with JS, it's possible with GSAP + JS. It's really hard for us to help when we don't have a clear demo of what you're trying to accomplish :) 

 

2 hours ago, JHB said:

I have not implemented it into the codepen cause I find codepen frustrating and struggle to stay logged in at this point.

That's weird, I've never had issues staying logged into CodePen. Maybe reach out to their support about it?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

16 minutes ago, JHB said:

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.

We'd love to see a minimal demo of this and fix any issues that may exist. If you could please provide one we'd greatly appreciate it.

 

16 minutes ago, JHB said:

I want to be accepted in the tribe one day when I am grown up and have another question.

You're always welcome!

Link to comment
Share on other sites

4 hours ago, JHB said:

It does not display any SVG elements I put into a draggable in IE11 on win10.

 

Never heard of elements just disappearing. Being able to see the problem in action would help to see if it's an issue with gsap. The demo you made above doesn't have an issues.
 

d54a08f1d5f29f28137d3dbf96a787df.gif

 

 

8 hours ago, JHB said:

I have not implemented it into the codepen cause I find codepen frustrating and struggle to stay logged in at this point.

 

There are other editors you can use, like codesandbox and stackblitz.

 

  • Like 1
Link to comment
Share on other sites

@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

Screenshot (75).jpg

Link to comment
Share on other sites

1 hour ago, JHB said:

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.

 

You should not be using onclick, or any on* events for that matter, as it won't allow Draggable to add other events to the element.

 

// BAD
Element.onclick=function(){alert('Clicked drop target!')};

// GOOD
Element.addEventListener("click", function() {
  alert('Clicked drop target!')
});

 

1 hour ago, JHB said:

This I did not add that to the pen, because it will not let me save it again.

 

Try one of these.

 

2 hours ago, OSUblake said:

There are other editors you can use, like codesandbox and stackblitz.

 

1 hour ago, JHB said:

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.

 

Does your SVG have a height? I think IE has issues with that.

<svg width="500" height="500"></svg>

 

But seeing the actual problem would be easier to troubleshoot.

 

 

  • Like 1
Link to comment
Share on other sites

@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

Link to comment
Share on other sites

32 minutes ago, JHB said:

Now... I would like to suggest the moderators think about allowing a secondary method of code communication for flexibility.

 

We've always allowed other methods. Attach a zip, link to a repo, it doesn't matter. It's just faster to test, experiment, and iterate using an online editor that can be forked. And again, if codepen isn't working, then try codesandbox or stackblitz. I actually prefer them over codepen.

 

What we don't want to see is live sites and projects with thousands of lines of code. Just the bare minimum needed to reproduce the problem.

 

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...