After attempting to use a guide for creating drag and drop features, I encountered an issue. I followed the steps outlined at
Despite the detailed instructions in the guide, I cannot seem to get the functionality to work. Is there a mistake in my code? I have provided all of my code below along with the guide author's comments for clarification. When I test the page, all the items are displayed but nothing happens when I try to move them.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<!-- JavaScript code for drag and drop functionality -->
<script type="text/javascript">
// Initializing variables for mouse events and dragging
var mouseOffset = null;
var iMouseDown = false;
var lMouseState = false;
var dragObject = null;
// Demo 0 variables
var DragDrops = [];
var curTarget = null;
var lastTarget = null;
var dragHelper = null;
var tempDiv = null;
var rootParent = null;
var rootSibling = null;
Number.prototype.NaN0 = function () { return isNaN(this) ? 0 : this; }
// Function to create a draggable container
function CreateDragContainer() {
// Create a new container instance
var cDrag = DragDrops.length;
DragDrops[cDrag] = [];
// Store each container item in the current container
for (var i = 0; i < arguments.length; i++) {
var cObj = arguments[i];
DragDrops[cDrag].push(cObj);
cObj.setAttribute('DropObj', cDrag);
// Make top level items draggable
for (var j = 0; j < cObj.childNodes.length; j++) {
if (cObj.childNodes[j].nodeName == '#text') continue;
cObj.childNodes[j].setAttribute('DragObj', cDrag);
}
}
}
// Function to handle mouse move events
function mouseMove(ev) {
// Code for mouse move actions
}
// Function to handle mouse up events
function mouseUp(ev) {
// Code for mouse up actions
}
// Function to handle mouse down events
function mouseDown() {
// Code for mouse down actions
}
// Event listeners for mouse events
document.onmousemove = mouseMove;
document.onmousedown = mouseDown;
document.onmouseup = mouseUp;
window.onload = function () {
// Create helper object for dragging
dragHelper = document.createElement('DIV');
dragHelper.style.cssText = 'position:absolute;display:none;';
// Create drag containers
CreateDragContainer(
document.getElementById('DragContainer1'),
document.getElementById('DragContainer2'),
document.getElementById('DragContainer3')
);
document.body.appendChild(dragHelper);
}
// Function to get mouse coordinates
function mouseCoords(ev) {
// Code for getting mouse coordinates
}
</script>
<title>Drag and drop test</title>
</head>
<body>
<form id="form1" runat="server">
<div class="DragContainer" id="DragContainer1">
<div class="DragBox" id="Item1" overClass="OverDragBox" dragClass="DragDragBox">Item #1</div>
<div class="DragBox" id="Item2" overClass="OverDragBox" dragClass="DragDragBox">Item #2</div>
<div class="DragBox" id="Item3" overClass="OverDragBox" dragClass="DragDragBox">Item #3</div>
<div class="DragBox" id="Item4" overClass="OverDragBox" dragClass="DragDragBox">Item #4</div>
</div>
<div class="DragContainer" id="DragContainer2">
<div class="DragBox" id="Item5" overClass="OverDragBox" dragClass="DragDragBox">Item #5</div>
<div class="DragBox" id="Item6" overClass="OverDragBox" dragClass="DragDragBox">Item #6</div>
<div class="DragBox" id="Item7" overClass="OverDragBox" dragClass="DragDragBox">Item #7</div>
<div class="DragBox" id="Item8" overClass="OverDragBox" dragClass="DragDragBox">Item #8</div>
</div>
<div class="DragContainer" id="DragContainer3">
<div class="DragBox" id="Item9" overClass="OverDragBox" dragClass="DragDragBox">Item #9</div>
<div class="DragBox" id="Item10" overClass="OverDragBox" dragClass="DragDragBox">Item #10</div>
<div class="DragBox" id="Item11" overClass="OverDragBox" dragClass="DragDragBox">Item #11</div>
<div class="DragBox" id="Item12" overClass="OverDragBox" dragClass="DragDragBox">Item #12</div>
</div>
</form>
</body>
</html>