Skip to content Skip to sidebar Skip to footer
Home / C# / Html / Javascript

HTML5 Ondragstart Not Firing When Attirubtes Added Through C#

Post a Comment
I am trying to implement HTML5 drag & drop but the ondragstart event doesn't fire. I am loading tabs for my page programmaticly and apply the attributes like so: TabCell.Attrib

Solution 1:

You need to set the attributes with setAttribute:

TabCell.setAttribute("draggable", "true");
TabCell.setAttribute("ondragstart", "onDragStart(event)");

Working code example below. If you start dragging the first tab onDragStart fires and shows the message 'Drag has started'.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <style>
        .tab {
            overflow: hidden;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }
        .tab button {
            background-color: inherit;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            transition: 0.3s;
        }
        .tab button:hover {
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <div class="tab">
        <button id="TabCell1">Tab1 Header</button>
        <button id="TabCell2">Tab2 Header</button>
    </div>
    <div id="content"></div>
    <script>
        window.onload = () => {
            var TabCell = document.getElementById('TabCell1');
            TabCell.setAttribute("draggable", "true");
            TabCell.setAttribute("ondragstart", "onDragStart(event)");
            var TabCell2 = document.getElementById('TabCell2');
            TabCell2.setAttribute("draggable", "true");
        };
        function onDragStart(ev) {
            var el = document.getElementById('content');
            el.innerHTML = "Drag has started";
        }
    </script>
</body>
</html>

Post a Comment for "HTML5 Ondragstart Not Firing When Attirubtes Added Through C#"