Drag and Drop

[info@tesseractlearning.com]

Hi Guys,

 

I am trying to create drag and drop using drag-gable and hittest method.i stuck trying to achieve below task 

* I want to place my drag-gable(represented in blue in the image) to position, scale(achieved by setting width and height of drop-area) and fit inside the drop-area 

but i am not able to get position of droparea correctly to position my drag-gable .i tried draggable.updated() method which just sticks drag-gable to user onDragEnd event .

Please let me know,how can i achieve desired result.

Thanks in advance.

 

 

 

See the Pen LYYPxEZ?editors=0011 by sudhakarselva (@sudhakarselva) on CodePen

[ZachSaucier]

Hello and welcome to the GreenSock forums. Thanks so much for being a Business Green member! We couldn't do what we do without people like you.

 

The basic approach is to calculate the position of the drop-area in the Draggable's onRelease. You can use something like the following to do so:

 

Draggable.create('.slide', {
  onRelease: function(e) {
    // Get the position and size of the drop-area
    var dropArea = document.getElementById('drop-area');
    var dropAreaRect = dropArea.getBoundingClientRect();
    
    // Set the target's position and size to the position and size of the drop-area
    //target's x = dropAreaRect.x;
    //target's y = dropAreaRect.y;
    //target's width = dropAreaRect.width;
    //target's height = dropAreaRect.height;
    
    // Maybe remove the target area? or you could move it instead if you needed to.
    dropArea.parentNode.removeChild(dropArea);
  }
});

If you would like help with your specific project, a minimal demo of your setup in a CodePen would be helpful.

[info@tesseractlearning.com]

@ZachSaucier. Thanks you so much for your kind response and its our pleasure .

There is some issues with the implementation maybe i will come with codepen example .

Thanks again!!

[OSUblake]

You can't set x, y, width, or height directly like that. Maybe like this.

 

Draggable.create('.slide', {
  onRelease: function(e) {
    // Get the position and size of the drop-area
    var dropArea = document.getElementById('drop-area');
    var r = dropArea.getBoundingClientRect();
    
    TweenLite.set(this.target, {
      x: r.left,
      y: r.top,
      width: r.width,
      height: r.height
    });
        
    // Maybe remove the target area? or you could move it instead if you needed to.
    dropArea.parentNode.removeChild(dropArea);
  }
});

 

I would use left and top from getBoundingClientRect() because x and y are not available in every browser.

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#Browser_compatibility

 

[OSUblake]

☝️ That assumes everything is positioned absolutely.

[ZachSaucier]

12 minutes ago, OSUblake said:

You can't set x, y, width, or height directly like that.

Right, I suppose I should make my pseudo code not look like real code  

[OSUblake]

Ha. Yeah, I think most people will take it literally.

 

[info@tesseractlearning.com]

@OSUblake. Thank you so much for your response. 

Drag elements  are not positioned absolutely.because user can add n number of draggable (think of it like a template user will create).

please check attached codepen 

 

[info@tesseractlearning.com]

49 minutes ago, ZachSaucier said:

Right, I suppose I should make my pseudo code not look like real code  

?for a second, i kinda thought that code would work(even though i knew props readable only). if i had not read MDN docs before i would have believed.My bad

[OSUblake]

28 minutes ago, info@tesseractlearning.com said:

Drag elements  are not positioned absolutely.

 

Then you are going to have to calculate the difference. 

[OSUblake]

It's not hard, and I have plenty of demos that do this (search around this forum or my pens on CodePen), but I don't have the time to work your problems out for you. This is very similar to the demos I made in this thread.

 

 

 

[OSUblake]

Actually, just use relative values. I was thinking of something different in my previous post.

 

TweenLite.to(this.target, 0.2, {
  x: "+=" + (dropBound.x - dragBound.x),
  y: "+=" + (dropBound.y - dragBound.y)
})

 

[info@tesseractlearning.com]

13 hours ago, OSUblake said:

It's not hard, and I have plenty of demos that do this (search around this forum or my pens on CodePen), but I don't have the time to work your problems out for you. This is very similar to the demos I made in this thread.

 

 

 

 

Thanks Again @OSUblake .I will  look into it.

[info@tesseractlearning.com]

13 hours ago, OSUblake said:

Actually, just use relative values. I was thinking of something different in my previous post.

 

TweenLite.to(this.target, 0.2, {
  x: "+=" + (dropBound.x - dragBound.x),
  y: "+=" + (dropBound.y - dragBound.y)
})

 

It worked. but could not understand exactly what   += does .but  before i had same without += that didnt work. Thanks a lot for your time @OSUblake 

Edited October 4, 2019 by info@tesseractlearning.com
Solution update