Jump to content
GreenSock

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

Change cursor when grabbing an item

Go to solution Solved by Jonathan,

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

Hello,

I've been looking for a way to keep my cursor as a grab when the item is not been dragging and to grabbing when the item is being dragging but then come back to grab when the user stop dragging the item. 

 

I don't know if I was clear but it's similar to this cursor action: http://fetedelabiere.promo-agency.com/

 

 

Here's part of my code where I managed to make change the cursor when the drag starts but not when the user stops

 Draggable.create(div1, {
        type: 'x,y',
        bounds: parent,
        edgeResistance: 1,
        onDrag: function() {
          childX.html(this.x);
          childY.html(this.y);
        }
      });
      Draggable.get("#div1").vars.cursor = "grabbing";
Link to comment
Share on other sites

  • Solution

Hello eloisem and Welcome to the GreenSock Forum,

 

You can use the Draggable property cursor, to set the initial CSS cursor property to grab for when hovered. And then onDragStart set the cursor to grabbing for when you start dragging.

 

See the Pen NxPEQQ by jonathan (@jonathan) on CodePen


 

Draggable.create("#dragme", {
  throwProps: true,
  bounds: window,
  edgeResistance: 0.7,
  cursor: "grab", /* set initial cursor to grab */
  onDragStart:function(){
       TweenLite.set("#dragme",{cursor:"grabbing"});
  },
  onDragEnd:function(){
       //TweenLite.set("#dragme",{cursor:"grab"}); /* optional but not needed */
  }
});

The cursor sets the hover state (roll over) based on the Draggable Plugin Docs:

  • cursor : String - by default (except for type:"rotation"), the cursor css property of the element is set to "move" so that when the mouse rolls over it, there's a visual cue indicating that it's moveable, but you may define a different cursor if you prefer (as described at http://devdocs.io/css/cursor) like cursor:"pointer".

Does that help :)

  • Like 2
Link to comment
Share on other sites

  • 5 years later...

Hello :-)

 

  1. I'm trying to get a grapping icon while the user grabs and holds the Watering Can.
  2. It would also be nice if the Watering Can would rotate down when hovering over the grass.

 

  • Would it be difficult to only use javascript? (I tried already a lot of things, also by attaching an image to the mouse and let it follow it. The cursor always get's standard...)
  • Would it be easier to use GSAP? (Setting it up, implenting it in my work? )

 

Thank you for any advice,

Kind regards,

Claude

 

CODEPEN

See the Pen gOLRZRx by Shaman1975 (@Shaman1975) on CodePen

 

 

HTML

<div>
  <img draggable="true" id="gb03" class="gamebtn" alt="Watering Can" src="https://ga.chi.lu/wp-content/uploads/2021/02/watering-can.png" width="80" height="80">  
</div>
<img id="grass" class="grasspng" alt="Grass" src="https://ga.chi.lu/wp-content/uploads/2021/02/grass.png">
</img>

 

CSS

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body::-webkit-scrollbar,
html::-webkit-scrollbar {
  display: none;
}

.gamebtn {
  z-index: 2;
  width: 50px;
  height: 50px;
  margin-bottom: 5px;
}

.gamebtn:hover {
  cursor: pointer;
  filter: brightness(130%) drop-shadow(0 2px 5px black);
}

#grass {
  position: fixed;
  bottom: -50px;
  width: 100%;
  z-index: 1;
  transition: all 2s;
  transition-timing-function: linear;
}

 

JS

window.addEventListener("load", function () {
  document.getElementById("gb03").addEventListener("dragstart", WaterDown);
  document.getElementById("gb03").addEventListener("dragend", WaterUp);
  document.addEventListener("dragover", WaterOver);
  document.addEventListener("drop", WaterDrop);
  document.getElementById("grass").style.bottom = "-50px";
});

function WaterDown() {
  console.log("Started to drag");
}

function WaterUp() {
  console.log("Stopped to drag");
}

function WaterOver(event) {
  event.preventDefault();
}

function WaterDrop(event) {
  event.preventDefault();
  if (event.target.id == "grass") {
    console.log("Dropped " + event.target.id);
    var grass = document.getElementById("grass");
    var bottom = grass.style.bottom;
    var grow = "10px";

    console.log(bottom);

    if (bottom == "0px") {
      grass.style.bottom = "0px";
      document.getElementById("gb03").style.display = "none";
    } else {
      grass.style.bottom = parseInt(bottom, 10) + parseInt(grow, 10) + "px";
    }
  } else {
    console.log("Nope");
  }
}

 

Work in progress is for this site: https://ga.chi.lu

 

Edited by Shaman
Comment/Reply of @ZachSaucier
Link to comment
Share on other sites

Hey @Shaman and welcome to the GreenSock forums.

 

If you'd like our help debugging, please create a minimal demo using something like CodePen, create a new thread about your issue, and ask a specific question about what you're stuck on. 

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

×