User1559292362 posted
Hi inkaln,
drag and drop with dynamic listbox and dynamic textboxes
As your requirement, I would suggest that you use Jquery and JqueryUI to achieve it. like this:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DrapAndDrop.aspx.cs" Inherits="WingtipToys.Demo.DrapAndDrop" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<title></title>
<style>
body {
font-family: sans-serif;
font-size: 11pt;
}
.draggable {
width: 250px;
height: 20px;
background-color: #e6eaff;
border: 2px solid #3399cc;
margin-bottom: 1em;
padding: 4px;
cursor: default;
}
.active {
border: 2px solid #6699ff;
}
#droppable {
font-size: 14pt;
width: 400px;
}
#droppableHolder {
margin-top: 5em;
}
</style>
<script type="text/javascript">
$(function () {
$(".draggable").draggable({
revert: true,
helper: 'clone',
start: function (event, ui) {
$(this).fadeTo('fast', 0.5);
},
stop: function (event, ui) {
$(this).fadeTo(0, 1);
}
});
$("#droppable").droppable({
hoverClass: 'active',
drop: function (event, ui) {
this.value = $(ui.draggable).text();
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="draggable">here are some draggables</div>
<div class="draggable">you can drop any of these</div>
<div class="draggable">in the text box and the</div>
<div class="draggable">text will be set to its contents!</div>
<div id="droppableHolder">
Drop in this text box:<br />
<br />
<input type="text" id="droppable" />
</div>
</div>
</form>
</body>
</html>
Besides, you could also use some plugin to achieve it, such as TelerikUI as below
http://demos.telerik.com/aspnet-ajax/listbox/examples/functionality/draganddrop/defaultcs.aspx
Best regards,
Cole Wu
