Jump to content


Help!! With swapping

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts


Ive been struggling to figure this out for about 3 days now. I am creating columns dynamically that are added to a container (when user clicks the add button). Using the draggable plugin I have made them draggable (only horizontally). Everything works fine but what I am stuck with is when a column is dragged and dropped on another then (the dragged column) should be placed either to the left or right of the target column. This is my code thus far. Any help will be greatly appreciated.

Draggable.create($element, { // use $element instead of ".column". This is declared at the top ^^^ and refers to this specific instance of 'column'
type: "x",
edgeResistance: 0.65,
throwProps: true,
bounds: {left: 0},
lockAxis: true,
autoscroll: 1,
trigger: $element.find(".drag-handle"),// Use jQueryLite (built in to Angular) to find this column's drag handle
onPress: function () {
columnList = $(".column:not(#" + $element.attr("id") + ")").toArray();
initialCoords = ($element.css("left"));

onDragEnd: function (e) {
for(var i = 0; i < columnList.length; i++){
if(this.hitTest(columnList[i], overlapThreshold)) {
var jqueryColumn = $(columnList[i]);
var objectTwoCoord = jqueryColumn.position();
TweenLite.to(this.target, 0.5, {x: initialCoords });

Link to comment
Share on other sites


Thanks for the quick response. I've had a look at your example and all the others. However they were not useful for me. To be fair this is the first time im doing front end development and literally the learning curve is huge. My situation is that I have columns that are added dynamically into a container (whenever the columns are added the containers get bigger and has an infinite scroll). I need to be able to drag the columns (only horizontally and place them wherever I like), however if there is a case when a columns overlaps another then the column should be placed to the left or right of the target column. This is very similar to the way twitter has done it. I know this is a nooob question but I am a noob at angular, js, html and css. Any help will be greatly appreciated.


EDIT: The container being used is not a list or a grid 

Link to comment
Share on other sites

Draw 2 overlapping rectangles out on paper, and you should see the answer. The amount to offset an element will be the overlap. The value of the overlap is the right coordinate of one rectangle minus the left coordinate of the other rectangle. 


You can get an object with the top, left, right, bottom, width, and height for an element using getBoundingClientRect, making it easier to figure out the overlap between your elements.

var rect = $element[0].getBoundingClientRect();

If you need more help, please make a demo.



  • Like 3
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.