asp.net treeview drag and drop
I tried to provide drag and drop functionality to an asp.net treeview control for my CMS to change the website pages hierarchy just dragging the pages icons. I lost a lot of time because the ondragstart javascript event was never fired. This even was never fired because the TreeNode element always handles the onClick event without you choose to handle it. When the onClick event is fired the ondragstart event is never called.
What is the reason?
It happens because the treeNode element is always rendered with an <a href… onClick=”…”> </a> so it always handles the onClick.
If you try to do something like this:
dim tn as new TreeNode
tn.Text = “<img src=”"ico_htm.gif”" ondrop=’return drop(” + pagina.Oid.ToString() + “)’ ondragenter=’enterDrag()’ ondragover=’overDrag()’ ondragstart=’startDrag()’ ondragend=’endDrag()’ myLabel=’” + pagina.Oid.ToString() + “‘ border=0> Node text here”
The result will be:
<a href=# onClick=”…”><img src=”"ico_htm.gif”" ondrop=’return drop(” + pagina.Oid.ToString() + “)’ ondragenter=’enterDrag()’ ondragover=’overDrag()’ ondragstart=’startDrag()’ ondragend=’endDrag()’ myLabel=’” + pagina.Oid.ToString() + “‘ border=0> Node text here</a>
The treenode will be rendered inside an <a></a> tag so the ondragstart will never be fired.
What is the workaround?
It’s a simple trick to get rid of the <a> tag, all that you need is to start your treenode text with a </a> and finish with a <a href=#>.
This way you’ll remove the default treenode <a> tag just closing it before your HTML code starts but remember to open it again when your code is finished.
The result is:
dim tn as new TreeNode
tn.Text = “</a><img src=”"ico_htm.gif”" ondrop=’return drop(” + pagina.Oid.ToString() + “)’ ondragenter=’enterDrag()’ ondragover=’overDrag()’ ondragstart=’startDrag()’ ondragend=’endDrag()’ myLabel=’” + pagina.Oid.ToString() + “‘ border=0> Node text here<a href=#>”
Now that you know how to solve the treenode problem you just need to paste this Javascript code to do drag and drop
<script language=”JScript”><!–
var srcObj = new Object;
var dummyObj;
function startDrag(){
srcObj = window.event.srcElement;
dummyObj = srcObj.outerHTML;
var dragData = window.event.dataTransfer;
dragData.setData(’Text’, window.event.srcElement.src);
dragData.effectAllowed = ‘Copy’;
dragData.dropEffect = ‘move’;
}
function enterDrag() {
window.event.dataTransfer.getData(’Text’);
}
function endDrag() {
window.event.dataTransfer.clearData();
}
function overDrag() {
window.event.returnValue = false;
}
function drop(x) {
if (confirm(’Are you sure to move the page?’)) {
if (confirm(’Really sure?’)) {
window.event.returnValue = false;
alert(’Do you want the page : ‘ + srcObj.myLabel + ‘ to become a subpage of: ‘+x);
window.location=’YourPage.aspx?mode=move&idorig=’ + srcObj.myLabel + ‘&iddest=’ + x;
}
}
return false;
}
–>
</script>
That’s all, i hope i’ve been clear enough.
TAGS: Asp.net, dotnet, code snippet, seo, search engine optimization, visual studio.net, sample code, c#, vb.net
you don’t have to spend a $
