Jump to content
Search Community

Draggable : define drop area

Gillian test
Moderator Tag

Go to solution Solved by Carl,

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 everybody,

 

I was wondering if it was possible - I'm sure it is actually but I don't know how exactly - to define a drop area in which draggable elements would go. I saw the "trigger" property but I don't know how to use it.

For instance :

 

I created 6 labels like so :

<div class="move" id="word1">vol</div> 
<div class="move" id="word2">nuée</div>
<div class="move" id="word3">rangée</div>
<div class="move" id="word4">bande</div>
<div class="move" id="word5">tas</div>
<div class="move" id="word6">pile</div>

I give them draggable properties :

Draggable.create(".move", {
  cursor: "-webkit-grab",
  onDragStart:function(){
       TweenLite.set(".move",{cursor:"-webkit-grabbing", opacity:0.6});
  },
  onDragEnd:function(){
        TweenLite.set(".move",{opacity:1});

  }
});

And now, I would like them to be dropped (not everywhere on the page but) only in a drop area like a <span> :

<div class="exercice">Un(e) <span class="DropArea">............................</span> de cailloux</div>

How can I reach this result ?
Thank you for your consideration.

Link to comment
Share on other sites

Hello Gillian and welcome to the GreenSock Forum!

 

Here are 2 examples of drag and drop using Draggable

 

CodePens by moderator OSUblake:

 

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

 

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

 

If you still need assistance after looking at those codepen examples please feel free to create a limited codepen demo example showing your issue. This way we can test your code live and in context.

 

 

Thank You!

  • Like 2
Link to comment
Share on other sites

Thank you for the replies. I checked the examples but it seems still a bit complicated for me.

I did a codepen ; you can find it here : 

See the Pen PzvOqz by Gillian-D (@Gillian-D) on CodePen

What I'm trying to do is to show the drop area when the label is on (hover) and bring the label back to his place if it doesn't enter the drop area.

Link to comment
Share on other sites

  • Solution

Thanks for the demo. It looks like you were pretty close.

I may not understand what you are trying to do exactly but please see:

 

http://codepen.io/GreenSock/pen/kXdxmm

 

I think the biggest error of your code was that you already had a jQuery object defined

var dropArea = $(".dropArea");

and later on you were passing dropArea.target into another jQuery selector like

$(dropArea.target).addClass("highlight");

I changed that to 

dropArea.addClass("highlight");

and it seems to work better.

 

Great job, so far.

  • Like 3
Link to comment
Share on other sites

Hi again,

 

I have another issue about the drop area.
Actually, the whole exercise is in a "box" div and there are some other divs with everytime one exercise ; user can navigate from one to the other using a next and previous button.

I can't show it on a codepen (it doesn't work). But here is a part of the html structure (box 1, box 2 are not displayed together but one by one) :

<div class="box box-1 current" id="box1">
     <div class="consigne">Complète les expressions à l’aide des mots suivants :<br><br>
 	<div class="move" id="word1">vol</div> 
 	<div class="move" id="word2">nuée</div>
 	<div class="move" id="word3">rangée</div>
 	<div class="move" id="word4">bande</div>
 	<div class="move" id="word5">tas</div>
 	<div class="move" id="word6">pile</div>
     </div>

<br><br><br><br><br><br>
    
    <div class="exercice">Un(e) <div class="dropArea"></div> de cailloux</div>

    <div><img class="img" src="images/SHero1.png"></div>

</div>

<div class="box box-2" id="box2">
      <div class="consigne">Complète les expressions à l’aide des mots suivants :<br><br>
        <div class="move" id="word1">vol</div> 
        <div class="move" id="word2">nuée</div>
        <div class="move" id="word3">rangée</div>
        <div class="move" id="word4">bande</div>
        <div class="move" id="word5">tas</div>
        <div class="move" id="word6">pile</div>
      </div>

      <br><br><br><br><br><br>

      <div class="exercice">Un(e) <div class="dropArea"></div> d'assiettes</div>

      <div><img class="img" src="images/SHero2.png"></div>
</div>

I wrote a code to define the drop area and it works perfectly now.

// Draggable labels


var droppables = $(".move");
var dropArea = $(".dropArea");
var overlapThreshold = "100%";

Draggable.create(droppables, {
  cursor: "-webkit-grab",
  onDragStart:function(){
       TweenLite.set(droppables,{cursor:"-webkit-grabbing", opacity:0.6});
  },

  onDrag: function(e) {
    if (this.hitTest(dropArea, overlapThreshold)) {
      dropArea.addClass("highlight");
    } else {
      dropArea.removeClass("highlight");
    }
  },

  onDragEnd:function(e){
        TweenLite.set(droppables, {opacity:1});
        TweenLite.set(dropArea, {opacity:1});

  if(!dropArea.hasClass("highlight")) {
    TweenLite.to(this.target, 0.2, {
      x: 0,
      y: 0
    });
  }
}  
});

But, apparently, it concerns only the first div. For the second box, the drop area is not active (impossible to drop a label in it) and when the first drop area (box 1) is full (with a label), the second get the "highlight" properties I gave just as it was one and the same.

 

Any idea ?
Thanks a lot and sorry to not show a codepen.

Link to comment
Share on other sites

Please consult the demo I provided earlier: http://codepen.io/GreenSock/pen/GFBvn?editors=0010

 

You will see that when you drag one item it does a hitTest() against the other elements. 

There is a loop in the onDrag that goes through the Array of "droppables"

 

onDrag: function(e) {
    var i = droppables.length;
while (--i > -1) {
       if (this.hitTest(droppables[i], overlapThreshold)) {
         $(droppables[i]).addClass("highlight");
       } else {
         $(droppables[i]).removeClass("highlight");
       }

I'm guessing you need to hitTest() against multiple elements in a similar fashion.

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