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

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

  •  25-09-2022
  •  | 
  •  

質問

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);
});
});
役に立ちましたか?

解決

i have done a fiddle as per your input.

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

 $input.parents(".field-row:first").append($container)
ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top