drag and drop with dynamic listbox and dynamic textboxes RRS feed

  • Question

  • User-153404742 posted

    Not sure what the best way is....I have an idea of how to drag items from listbox and drop them in treeview nodes but I am trying to do the following and not sure exactly how to approach.

    I will have a listbox of items dynamically created from database.  On the right side, I will have a list of dynamically created label items from database table.   I want the program to dynamically create textboxes beside each of the label items and have the user to be able to drag item from the listbox on the left and drop them in individual text boxes.  The saving would then be saved to another database table with mapping (which will have unique id from listbox item mapped with item name dropped in the textbox).  

    Thursday, May 5, 2016 5:39 PM


  • 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>
            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;
        <script type="text/javascript">
            $(function () {
                    revert: true,
                    helper: 'clone',
                    start: function (event, ui) {
                        $(this).fadeTo('fast', 0.5);
                    stop: function (event, ui) {
                        $(this).fadeTo(0, 1);
                    hoverClass: 'active',
                    drop: function (event, ui) {
                        this.value = $(ui.draggable).text();
        <form id="form1" runat="server">
        <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" />

    Besides, you could also use some plugin to achieve it, such as TelerikUI as below


    Best regards,

    Cole Wu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, May 7, 2016 5:30 AM