如何在selectize.js中使用兩個具有拖放功能的輸入字段？

Question

所需的功能

• 兩個輸入字段都具有拖放功能。
• 在每個輸入字段下面生成的'value' div。

當前功能

四個生成的被創建，而不是兩個'value'的div。

插件演示（選擇Plugins選項卡，然後滾動到"drag_drop"）

http://brianreavis.github.io/selectize.js

我已經試過：

http://jsfiddle.net/rwone/E72q5/5/

HTML表單

<!-- 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); 
}); 
}); 

Answer 1

我已經做了小提琴，按您的輸入。

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

$input.parents(".field-row:first").append($container)