How to sort and create multiple text fields with jQuery UI droppable?

Question

Scenario:. I want my users to be able to create a shopping list by dragging and dropping products into the list with the ability to select and sort. Depending on the location of the product in the list and the value of the product, the text fields for this form must be filled.

jsFiddle : http://jsfiddle.net/imjp/5NWAQ/1/

For instance:

• Orange
• Apple
• Banana

Creates the following values ​​in my form fields (based, of course, on the data-product attribute ):

• item_1: orange
• item_2: apple
• item_3: banana

If I translate an apple, the fields should also update this.

Here are some html that I have compiled:

 <div class="demo"> <div id="products"> <h1 class="ui-widget-header">Products</h1> <div id="catalog"> <h3><a href="#">T-Shirts</a></h3> <div> <ul> <li data-product="Lolcat Shirt">Lolcat Shirt</li> <li data-product="Cheezeburger Shirt">Cheezeburger Shirt</li> <li data-product="Buckit Shirt">Buckit Shirt</li> </ul> </div> <h3><a href="#">Bags</a></h3> <div> <ul> <li>Zebra Striped</li> <li>Black Leather</li> <li>Alligator Leather</li> </ul> </div> <h3><a href="#">Gadgets</a></h3> <div> <ul> <li>iPhone</li> <li>iPod</li> <li>iPad</li> </ul> </div> </div> </div> <div id="cart"> <h1 class="ui-widget-header">Shopping Cart</h1> <div class="ui-widget-content"> <ol> <li class="placeholder">Add your items here</li> </ol> </div> </div> <div id="cart"> <h1 class="ui-widget-header">Shopping Cart</h1> <div class="ui-widget-content"> <ol> <li class="placeholder">Add your items here</li> </ol> </div> </div> <div id="list_1" style="clear: both; float: left;"> <h3>List 1</h3> <input id="list_1_item_1" type="text"> <input id="list_1_item_2" type="text"> </div> <div id="list_2" style="clear: both; float: left;"> <h3>List 2</h3> <input id="list_2_item_1" type="text"> <input id="list_2_item_2" type="text"> </div> </div><!-- End demo --> 

javascript (Keep in mind that javascript code does not work the way I want, it updates all fields with the same value):

 $( "#catalog" ).accordion(); $( "#catalog li" ).draggable({ appendTo: "body", helper: "clone" }); $( "#cart ol" ).droppable({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", accept: ":not(.ui-sortable-helper)", drop: function( event, ui ) { $( this ).find( ".placeholder" ).remove(); console.log(ui.draggable.length); $('#list_1_item_1').val(ui.draggable.data('product')); $('#list_1_item_2').val(ui.draggable.data('product')); $('#list_2_item_1').val(ui.draggable.data('product')); $('#list_2_item_2').val(ui.draggable.data('product')); $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this ); } }).sortable({ items: "li:not(.placeholder)", sort: function() { // gets added unintentionally by droppable interacting with sortable // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options $( this ).removeClass( "ui-state-default" ); } }); 

Answer 1

From what I understand, you should be able to create / update input fields dynamically when:

a) items are dragged and carried from accordion elements to any of the carts

b) items are reordered in any of the carts (sortable)

Check out this script for implementation: http://jsfiddle.net/CzKn9/3/

In your violin, I could see that you used the same id property for several elements (2 elements with an id cart). This should be avoided since the id attribute was designed to uniquely identify a single element in the DOM tree. (for example, if you execute document.getElementById('x') and several elements have id 'x' , you will only get the first element corresponding to this ID). I changed your code to fix this.

Secondly, I added a function that recreates your input fields (which will be sent when the form is sent to the server) with every drag and drop or sort event. The IDs of the created input fields are of the form list_1_item_1 , list_1_item_2 , list_2_item_1 , list_1_item_2 , etc.

Hope this helps.

UPDATE

Added index index index. Check out this script: http://jsfiddle.net/CzKn9/4/

Answer 2

Try this script:

http://jsfiddle.net/5NWAQ/5/

Use the sort stop event to retrieve the topmost li value and add it to the input.