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><htmllang="en"><head><metacharset="utf-8" /><style>.tab {
            overflow: hidden;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }
        .tabbutton {
            background-color: inherit;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 14px16px;
            transition: 0.3s;
        }
        .tabbutton:hover {
            background-color: #ddd;
        }
    </style></head><body><divclass="tab"><buttonid="TabCell1">Tab1 Header</button><buttonid="TabCell2">Tab2 Header</button></div><divid="content"></div><script>window.onload = () => {
            varTabCell = document.getElementById('TabCell1');
            TabCell.setAttribute("draggable", "true");
            TabCell.setAttribute("ondragstart", "onDragStart(event)");
            varTabCell2 = document.getElementById('TabCell2');
            TabCell2.setAttribute("draggable", "true");
        };
        functiononDragStart(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#"