Home/ Questions/Q 7587595
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T19:42:42+00:00

I have drag&drop jQuery script for dragging list items to input. How do I

  • 0

I have drag&drop jQuery script for dragging list items to input. How do I get text between li to set input value? I now that $this refers to droppable element.

My code is below:

    <script type"text/javascript">
        $(function() {
            $( ".draggable" ).draggable({
                revert: "valid"
            });
            $( ".droppable" ).droppable({
                drop: function( event, ui ) {
                $( this )
                    .find( "input" )
                    .val( "?" )
                }
            });
        });
    </script>
</head>
<body>
<div class="left">
    <ul>
        <li class="draggable">one</li>
        <li class="draggable">two</li>
        <li class="draggable">three</li>
        <li class="draggable">four</li>
    </ul>
</div>
<div class="right">
    <form>
        <div class="droppable">First <input class="droppable" type="text" name="first" value="" /></div>
        <div class="droppable">Second <input class="droppable" type="text" name="second" value="" /></div>
        <div class="droppable">Third <input class="droppable" type="text" name="third" value="" /></div>
        <div class="droppable">Fourth <input class="droppable" type="text" name="fourth" value="" /></div>
    </form>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try:

    function( event, ui ) {
           $( this )
               .find( "input" )
               .val( $(ui.draggable).text() )
           }
}

    The ui.draggable param is the draggable element that have been dropped.

    Quoting Jquery-UI:

    All callbacks receive two arguments: The original browser event and a
    prepared ui object, view below for a documentation of this object (if
    you name your second argument ‘ui’):

    ui.draggable – current draggable element, a jQuery object. ui.helper –
    current draggable helper, a jQuery object ui.position – current
    position of the draggable helper { top: , left: } ui.offset – current
    absolute position of the draggable helper { top: , left: }

    • 0