Change cursor when grabbing an item

[eloisem]

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";

[Jonathan]

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

[Diaco]

Hi eloisem 

 

in addition to Jonathan's advice ; i think this thread can help too : http://greensock.com/forums/topic/11728-draggable-cursor/

[Shaman]

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 February 19, 2021 by Shaman
Comment/Reply of @ZachSaucier

[ZachSaucier]

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.