Enyo.js/Javascript Event Handling

Question

I am currently trying to create an Enyo.js Drag & Drop App. I am using the HTML5 Drag and Drop API natively. I keep coming across this error in my "ondragstart" handler. I know I am calling the event handler properly because I am calling the function, however, it errors when I try to set "dataTransfer.setData()". The error I get is

TypeError: undefined is not an object (evaluating 'inEvent.dataTransfer.setData')

I do not understand why, please help.

     name: "ObjectBox",
     kind: Control,
     components: [
         {
             content: "Things im trying to move/listen to"
         },
         {
             kind: Square,
             ondragstart: "dragStart"
         },
         {
             kind: Circle,
             events: {
                ondragstart: "dragStart"
              }
         },
         {
             kind: DropTarget,
             ondrag: "drag",
             ondrop: "drop"
         }
     ]

Above code is how I set the objects (the objects have draggable: true) and how I handle the Events.

Below the code is how I am handling the events

dragStart: function(inEvent) {
    console.log("Started");
    console.log(inEvent);
    inEvent.dataTransfer.setData("text", inEvent.target.id); // this where I get error

},
drag: function(inEvent) {
    console.log("Dragging");
    inEvent.preventDefault();
},
drop: function(inEvent) {
    console.log("Dropped");
    inEvent.preventDefault();
    var data = inEvent.dataTransfer.getData("text");
    inEvent.target.appendChild(document.getElementById(data));
}

Answer 1

The first argument to Enyo event handlers is sender, the second parameter is event. Try adding a first parameter placeholder and see if you can access the event object on the second parameter.

See more here: http://enyojs.com/docs/latest/developer-guide/getting-started/event-handling.html