We can implement drag and drop feature in Html/Aspx pages easly. The below example shows the implementation of the drag & drop features.
Aspx Implementation
The below code explains the implementation of Drag & drop features in Asp page. You can see Drag & Drop features implementation in the below code. From the list of City's you can select Any one and drop in DropBox.
</body>
<script type="text/javascript">
// user
initiates a drag-and-drop operation.
function
DragContent() {
var
oData = window.event.dataTransfer;
//
Set the effectAllowed on the source object.
oData.effectAllowed = "move";
}
// object in the ondrop event.
function
DropContent() {
var
oTarg = window.event.srcElement;
var
oData = window.event.dataTransfer;
//
Cancel default action.
CancelDrop();
///Concatinate
the Drop content to Target
oTarg.innerText += oData.getData("text");
}
// mouse over the target object.
function
HandleDragEnter() {
var
oData = window.event.dataTransfer;
//
Cancel default action.
CancelDrop();
//
Set the dropEffect for the target object.
oData.dropEffect = "move";
}
function
CancelDrop() {
//
Cancel default action.
var
oEvent = window.event;
oEvent.returnValue = false;
}
</script>
Aspx Implementation
The below code explains the implementation of Drag & drop features in Asp page. You can see Drag & Drop features implementation in the below code. From the list of City's you can select Any one and drop in DropBox.
<body>
<span > List of
City :</span>
<table> <tr><td>
<span
id="oSource"
ondragstart="DragContent()">Chennai</span> </td></tr>
<tr><td><span id="Span1" ondragstart="DragContent()">Banglore</span> </td></tr>
<tr><td><span id="Span2" ondragstart="DragContent()">Mumbai</span> </td></tr>
<tr><td><span id="Span3" ondragstart="DragContent()">Delhi</span> </td></tr>
</table>
<hr
/>
<span> Select Your City then Drag & Drop in to the
box </span>
<div
id="DivDropBox"
style="background: beige; height: 100px; width: 200px; border: solid black
1px;"
ondrop="DropContent()"
ondragover="CancelDrop()"
ondragenter="HandleDragEnter()">
</div>
No comments:
Post a Comment