"click" event on Draggable SVG element still fires after disable() and kill()

[Steve Murray 2 Likes (Newbie)]

Hi all,

 

I'm trying to disable or kill a draggable element within an SVG. After calling disable() on the draggable, the onClick function still fires.

 

Other effects of disabling are as expected: the element can no longer be dragged, the "grab" cursor style is removed, the onDragEnd function no longer fires.

 

Have also tried kill(), with the same results.

 

Here's a minimal example, tested in Chrome and Firefox.

 

<svg version='1.1' xmlns="http://www.w3.org/2000/svg" x='0px' y='0px' viewBox='0 0 200 200'>
	<rect x="0" y="0" width="50" height="50" class="draggable1"></rect>
</svg>

<script type="module">

import { gsap } from 'gsap'
import { Draggable } from "gsap/Draggable";

gsap.registerPlugin(Draggable);

Draggable.create(".draggable1", {
	type:"x,y",
	bounds: "svg",
	onClick: function() {
		console.log("clicked");
	},
	onDragEnd: function() {
		console.log("drag ended");
	}
});

Draggable.get(".draggable1").disable(); // onClick function still fires

</script>

Let me know if you need further info.

 

Cheers

Steve

See the Pen YzvrEeG by stevemurray (@stevemurray) on CodePen

[GreenSock 18,894 Likes (Superhero)]

Sorry about the confusion there, @Steve Murray. That should be resolved in the next release which you can preview at https://assets.codepen.io/16327/Draggable3.min.js

 

You're welcome to use that file or if you want a workaround with the current version, you could call this BEFORE you create your Draggables: 

function clickFix(elements) {
  gsap.utils.toArray(elements).forEach(el => {
    el.addEventListener("click", (e) => {
      let draggable = Draggable.get(el);
      draggable && !draggable.enabled() && e.stopImmediatePropagation();
    }, {capture: true});
  })
}

 

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

 

Does that clear things up? 

[Steve Murray 2 Likes (Newbie)]

Thanks for the quick reply Jack.

 

Yes, that clears things up and can confirm your clickfix() function is a workaround.

 

Cheers

Steve