Jump to content

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

Auto scrolling and boundaries.. with clones

Recommended Posts



In preparation for a larger project, I've been playing around with Draggable and created a very simple scrabble board.   There are two 'tile racks' that have tiles which can be dragged on the board.  I've relied on a lot of concepts from  

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

.  But there are a few fundamental differences.. the biggest being that I want to create multiple clones of the same letter.


I have a lot working, but I'm also having issues with auto scroll and bounds. 


In the provided codepen:

  1. the draggable item doesn't follow the mouse while auto scrolling.  It appears to stay fixed while the scrolling occurs.
  2. the draggable item can be dragged beyond the bounds of the div.  The div continuously expands


I have tried various ways to find a solution to these issues, without success.


Any help is appreciated


See the Pen dRwRGj by anon (@anon) on CodePen

Link to comment
Share on other sites

This can get really complicated. Creating clones is not the issue. It's how to handle dragging something in and out of containers that scroll. I made a rough demo of how this might work a while ago. The hard part is figuring out if the user want the container to scroll, or are they trying to remove the item from the container as those are mutually exclusive actions.


See the Pen XdQPvJ?editors=1010 by osublake (@osublake) on CodePen


  • Like 4
Link to comment
Share on other sites

Thanks for the reply, OSUBlake.


I'm trying to solve the issue after dropping the tile on the board (apologies.. my original post was vague on this point).  So sequence is:  

  1. drag tile from rack onto board;
  2. drop tile on board;
  3. then drag to new position on board

The issues I'm trying to resolve are with point 3.  At that point, when I drag an item, the auto scroll doesn't behave as expected.  And when dragging to the edge of the container, the container continuously grows.


Thanks again for the help.


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.