I am trying to implement a drag and drop functionality in lwc and I am getting the below code:

<template for:each={leftTask} for:item="task">
    <div class="draggable" draggable="true" key={task.taskId} ondragstart={handleDragStart(task.taskId)}>{task.name}</div>

However, it seems that lwc doesn't allow passing parameters directly into handle functions. So the above code won't work. I am wondering is it possible to pass any parameter into js handler at all? Or do I have to make a separate child component in order to handle this?


You can read data directly from the target:

<div data-id={task.taskId} class="draggable" draggable="true" key={task.taskId} 

function handleDragStart(event) {
    var taskId = event.target.dataset.id;
    // ...
  • @sfscfox do you know of a similar solution for the <button> tag? When I set data-id and try to access it via event.target.dataset.id, it does not exist. dataset doesn't actually exist. – BlondeSwan May 30 at 21:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.