Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

trigger an event onDragEnd

See original GitHub issue

I am trying to call a function onDragEnd. I want to pass the values as an arguments where the script displays the updated values in the console.

` onDragEnd: function (e, datasetIndex, index, value) {

				console.log(datasetIndex, index, value)
				this.modifyDataSet(datasetIndex, index, value);

Console.log works fine. But I dont know how to trigger a custom function. I need to project the values in a datagrid in parallel to the chart. Your help would be highly appreciated. Thanks

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:11 (5 by maintainers)

github_iconTop GitHub Comments

chrispahmcommented, Feb 6, 2019

Hey there,

glad you could resolve your issue! As expected the error stems from the way your functions are set up. It look like for the onDragEnd function you use an ES6 arrow function, whereas for the others you don’t. Keep in mind that by not using arrow functions in JavaScript, the value of this can often be misleading.

onDragEnd: (e, datasetIndex, index, value) => { this.modifyDataSet(datasetIndex, index, value) },
onDrag: (e, datasetIndex, index, value) => { this.modifyDataSet(datasetIndex, index, value) }, 
onDragStart: (e, datasetIndex, index, value) => { this.modifyDataSet(datasetIndex, index, value) }

That should to the trick. If you got some time on your hands, I really recommend this course on all ES6 features that were implemented in JS, it really helped me understanding some of these concepts!

chrispahmcommented, Feb 5, 2019

Hey there,

it seems like the function you are trying to call is a method within a component, so you’re probably using React or Vue.js? If that is the case, the value of your this keyword is determined by how the function is called. You can read more about the topic here.

As I don’t know about the rest of your code, one of the following might be the solution to your problem. Keep in mind that in these solutions, the value of this retains the this value of the enclosing lexical context.

Use ES6 arrow functions

I like to use those a lot because (in my yet limited understanding of programming in general) it makes the use of this more straightforward

onDragEnd: (e, datasetIndex, index, value) => {
	console.log(datasetIndex, index, value)
	this.modifyDataSet(datasetIndex, index, value);

When using a Framework (specifying the onDragEnd function externally)

Assuming you actually use a framework like React or Vue, you may have a component that looks somewhat like this (I use Vue myself so the following example will stick to that):

import Chart from 'chart.js'
// import your default chart settings externally so your code remains cleaner
import chartSettings from '~/assets/js/chartSettings.js'
import 'chartjs-plugin-dragdata'

export default {
  data() {
    return {
  mounted() {
  methods: {
   modifyDataSet(e,datasetIndex,index,value) {
     // your logic
   createChart(chartId) {
      const ctx = document.getElementById(chartId)
      // specify onDragEnd callback
      // in this scenario, the this value will work as you assume it to be
      chartSettings.options.onDragEnd = this.modifyDataSet
      this.myChart = new Chart(ctx, {
        type: chartSettings.type,
        options: chartSettings.options

As you can see, we specified the modifyDataSet method as the onDragEnd function outside of the new Chart constructor. I really like this approach, as it keeps the code clean, easy to read and understand.

Hope this (at least partially) solves your issue! Best Christoph

Read more comments on GitHub >

github_iconTop Results From Across the Web

ondragend Event - W3Schools
The ondragend event occurs when the user has finished dragging an element or text. Drag and drop is a common feature in HTML....
Read more >
HTMLElement: dragend event - Web APIs | MDN
The dragend event is fired when a drag operation is being ended (by releasing a mouse button or hitting the escape key).
Read more >
How to trigger dragend event - javascript - Stack Overflow
And the answer is, execute the mouseup event instrumentInfo.dispatchEvent(new Event("mouseup"));.
Read more >
JavaScript Events Handlers — ondragend and ondragenter
In JavaScript, events are actions that happen in an app. They're triggered by various things like inputs being entered, forms being submitted, ...
Read more >
Scripting API: EventSystems.EventTrigger.OnDrag - Unity
//Attach this script to the GameObject you would like to detect dragging on //Attach an Event Trigger component to the GameObject (Click the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found