How to have two input fields with drag and drop functionality in selectize.js?

StackOverflow https://stackoverflow.com/questions/20995771

  •  25-09-2022
  •  | 
  •  

Pregunta

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);
});
});
¿Fue útil?

Solución

i have done a fiddle as per your input.

http://jsfiddle.net/Shinov/csNgy/

 $input.parents(".field-row:first").append($container)
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top