Jump to content
Search Community

Draggable problem with drop target

ncou test
Moderator Tag

Go to solution Solved by OSUblake,

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

Hi,

 

I got a problem with the drop target function.

 

I made a codepen example to illustrate the problem :

 

It work fine with the red "picture" box => when i want to drop it on the tag box, the div is on top of everything.

but with the "kitten" picture box it's behind the left panel when i try to drop the picture on a tag label box again :(

 

It work fine if i remove the "position : relative" attribute or the overflow: auto; attribute, but i don't think it's coming from here, because if i try to test it in my site web, i still have the problem.

 

Can you help me on this problem ?

 

Thank you.

 

 

 

 

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

Link to comment
Share on other sites

Thanks for the demo. Very helpful. 

 

I don't have a lot of time to decipher all the css and what classes are affecting various properties. 

 

But, like you, it appears that overflow:auto is to blame

 

57mSsL7.png

 

 

I provide this to show that the cat is NOT going behind the tag1 and tag2 elements. It is being cropped by .media-library-list.

i also made the left sidebar less wide.

 

I don't understand the specifics of your project but my first instinct is just to suggest that you treat the cat the same way as the red box.

  • Like 2
Link to comment
Share on other sites

It's the overflow:auto who are causing the problem.

But i can't change this, because i got a list of picture (on the right panel), and i need to move them on the tags label on the left panel :(

Everithing is in a modal popup.

 

Any idear to bypass this problem ? or you think there is no workaround ?

 

Update :

I made another codepen, it seems it's more the "position:relative" who is the problem. If i change in the ".media-library-list-item" the position to absolute, the drag work correctly. if i change it to "relative" i got the problem.

 

In my projet i need to use the relative position because all my thumbnails needs to be aligned in my grid.

 

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

 

in this codepen the cat div work fine, but the red div not because i removed the position attribute in the ".box" style.

Link to comment
Share on other sites

It's look like this could solve my problem.

 

I will try to made a test in the day to see if this solve my problem.

 

PS : I played with you demo because i want this : once i drop my item i want to keep it in the top list, but actually it disapear. 

 

I disabled a few tweens so i still get the element visible, but when i drop it in the target zone, the letter is removed from the list :( i can't find in the code where the hide is made. any idear ?

 

Thank you.

Link to comment
Share on other sites

Hi, 

 

The clone solution seems to work better, now i can move it outside of the scrollable div.

 

I am trying to use your example (i made a grid instead of an horizontal line), but i got a ****** result :( i can't put the clones on the original div picture.

 

My goal is to move picture on the left tag list. And the clone disapear (it's working only for the first 2 tags, i can't move the clone on the third tag), and the original picture should stay in place (this seems to work). => I made a codepen example.

I got on the left the clone and on the right the original picture... I tried with a flex display to overlay both div, but without success.

 

Can you point me my mistake(s) ?

 

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

 

Thank you for your help.

Link to comment
Share on other sites

You should also check out this post that does positioning of clones, although without Draggable.

http://greensock.com/forums/topic/14206-full-screen-a-div/?p=60466

 

You get the getCoundingClientRect on the element you want to position it to. Then append the clone to the body and set it using these properties.

// Vanilla JavaScript
var body = document.body;
var clone = element.cloneNode(true);

var rect = element.getBoundingClientRect();

body.appendChild(clone);

TweenLite.set(clone, {
  top: rect.top + body.scrollTop,
  left: rect.left + body.scrollLeft,
  height: rect.height,
  width: rect.width,
  position: "absolute"
});
  • Like 1
Link to comment
Share on other sites

Thank you, it's better but not yet perfect.

 

I made the positionning OK, but :

 

1) i can't made the left list scroll down if i want to drop a picture on a tag div  who is below (example on TAG8).

I tried to mix a scrollTo when the onDrag event is fired but without success.

 

2) Is it possible to made the clone outside the div ".sl-popup-body" ? the clones will be in a modal popup, i want to made then move freely outside the main div.

If i change the "var container" with the main div modal popup, will this work ?

 

 

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

 

Sorry for bothering you with my noob questions.

Link to comment
Share on other sites

  • Solution

Not sure what you're asking about with a modal. 

 

What you are trying to do is unlike anything that I've ever seen. Draggable has an autoScroll feature that will do the scrolling, but it has to be a child of container, and can't move freely about. You need to use multiple Draggable and clones of clones to do this. 

 

You had too much CSS getting in the way, so I made another version. I used ES6 classes to make it. If you don't use ES6, click on the viewCompiled button to see the regular JavaScript. You can drag the image from a scrollable container into another scrollable container with auto-scrolling.

 

It's not perfect, but a good start.

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

  • Like 5
Link to comment
Share on other sites

  Thank you for your help. I nearly made what i have in mind I still got a gap of a few pixels when i try to position my clones (if the zoom page is above 100%), but it seems like a subpixels issue.

 

For the autoscroll on the left list, i used a workaround. You solution is really clean but is was hard (for my level) to include in my website.

 

I used some div on top and bottom of the scroll list (this simulate a shadow to understand there is items below) and i simulate a scrollTop+1 when i drag the clone on this div (to scroll dow/up the tag list), not yet perfect but it's working.

 

Thank you again both of you, and for the time you spend to answer my issue.

 

Here a preview of what i was trying to do with my modal and scroll list.

test.png

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