Desired Functionality
- Two input fields that both have drag and drop functionality.
- With the generated
'value'div beneath each input field.
Current Functionality
Four generated 'value' divs are being created instead of two.
Plugin Demo (select the Plugins tab and scroll to "drag_drop")
http://brianreavis.github.io/selectize.js
What I've Tried:
http://jsfiddle.net/rwone/E72q5/5/
HTML Form
<!-- simple html form - a container with left and right divs -->
<div class="my_form_page_content">
<form id="my_form_name" name="my_form_name">
<div class="my_form_container">
<div class="my_form_left">
<p>field one</p>
<p>field two</p>
</div>
<div class="my_form_right">
<div class="input_wrapper">
<input type="text" id="input-sortable-1" class="input-sortable demo-default" value="input 1 value, lala1, lala1a">
</div>
<div class="input_wrapper">
<input type="text" id="input-sortable-2" class="input-sortable demo-default" value="input 2 value, lala2, lala2a">
</div>
</div>
<div class="my_form_button">
<button type="submit">submit</button>
</div>
</div>
</form>
</div>
jQuery
// aim: to have a unique 'value' div beneath each input field.
// selectize drag and drop functionality
$('.input-sortable').selectize({
plugins: ['drag_drop'],
delimiter: ',',
persist: false,
create: function(input) {
return {
value: input,
text: input
}
}
});
// the js that should add a 'value' div after each input box
$(function() {
var $wrapper = $('.input_wrapper');
// show current input values
$('select.selectized,input.selectized', $wrapper).each(function() {
var $container = $('<div>').addClass('value').html('Current Value: ');
var $value = $('<span>').appendTo($container);
var $input = $(this);
var update = function(e) { $value.text(JSON.stringify($input.val())); }
$(this).on('change', update);
update();
$container.insertAfter($wrapper);
});
});
