jQuery Forum

Hi,
I am using jquery-1.9.1 and jqueryui-1.10.3 in my web application.
I have a list of html elements like

1.         <div id="products">
2.           <h1 class="ui-widget-header">Process and Equipment List</h1>
3.           <div id="catalog">
   
4.             <h2><a href="#">Conveyor</a></h2>
5.               <div>
6.                 <ul>
7.                   <li>Belt Conveyor</li>
8.                   <li>Cart on Track Conveyor</li>
9.                   <li>Chain Conveyor</li>
10.                   <li>Chute Conveyor</li>
11.                   <li>Flat Belt Conveyor</li>

I am using drag and drop

1.       $(function() {
2.         $( "#catalog" ).accordion();
3.         $( "#catalog li" ).draggable({
4.         appendTo: "body",
5.         helper: "clone"
6.       });

First I would like to associate some text content against each element in the list. To be specific the text would be a structured query. I would like to be able to drag and drop elements from the list into a query box, which would dump the text (query) which is bound to the li element.

If for example we take "Belt Conveyor" from the above and drop it into the query box, some text which has been bound to the element would be pasted in to the query box instead of the text "Belt Conveyor".

Is this possible with drag and drop? If so can someone please guide me in the right direction please?

Thank you very much in advance.

Best

Lewis