Skip to contents

Create a shiny input control to show the order of a set of items

Source: R/orderInput.R
orderInput.Rd

Display a set of items whose order can be changed by drag and drop inside or between orderInput(s). The item order is send back to server in the from of input$inputId.

Usage

orderInput(
  inputId,
  label,
  items,
  as_source = FALSE,
  connect = NULL,
  item_class = c("default", "primary", "success", "info", "warning", "danger"),
  placeholder = NULL,
  width = "500px",
  legacy = FALSE,
  ...
)

Arguments

inputId

The input slot that will be used to access the current order of items.

label

Display label for the control, or NULL for no label.

items

Items to display, can be a list, an atomic vector or a factor. For list or atomic vector, if named, the names are displayed and the order is given in values. For factor, values are displayed and the order is given in levels

as_source

A boolean value to determine whether the orderInput is set as source mode. Only works if the connect argument was set.

connect

Optional. Allow items to be dragged between orderInputs. Should be a vector of inputId(s) of other orderInput(s) that the items from this orderInput should be connected to.

item_class

One of the Bootstrap color utility classes to apply to each item.

placeholder

A character string to show when there is no item left in the orderInput.

width

The width of the input, e.g. '400px', or '100\ shiny::validateCssUnit.

legacy

A boolean value. Whether to use the old version of the orderInput function.

...

Arguments passed to shiny::tags$div which is used to build the container of the orderInput.

Value

An orderInput control that can be added to a UI definition.

Details

orderInputs can work in either connected mode or stand-alone mode. In stand-alone mode, items can only be drag and drop inside the input control. In connected mode, items to be dragged between orderInputs, which is controlled by the connect parameter. This is a one-way relationship. To connect items in both directions, the connect parameter must be set in both orderInputs.

When in connected mode, orderInput can be set as source-only through the as_source parameter. The items in a "source" orderInput can only be copied, instead of moved, to other connected non-source orderInput(s). From shinyjqui v0.4.0, A "source" orderInput will become a "recycle bin" for items from other orderInputs as well. This means, if you want to delete an item, you can drag and drop it into a "source" orderInput. This feature can be disabled by setting the options of non-source orderInput(s) as list(helper = "clone").

From shinyjqui v0.4.0 and above, the orderInput function was implemented in the similar way as other classical shiny inputs, which brought two changes:

  1. The input value was changed from input$inputId_order to input$inputId;

  2. The new version supports updateOrderInput function which works in the same way as other shiny input updater functions. To keep the backward compatibility, a legacy argument was provided if user wanted to use the old version.

Examples

orderInput('items1', 'Items1', items = month.abb, item_class = 'info')
#> <label class="control-label" id="items1-label" for="items1">Items1</label>
#> <div id="items1" style="width: 500px; font-size: 0px; min-height: 25px;" class="jqui-orderInput">
#>   <div data-value="Jan" class="btn btn-info" style="margin: 1px">Jan</div>
#>   <div data-value="Feb" class="btn btn-info" style="margin: 1px">Feb</div>
#>   <div data-value="Mar" class="btn btn-info" style="margin: 1px">Mar</div>
#>   <div data-value="Apr" class="btn btn-info" style="margin: 1px">Apr</div>
#>   <div data-value="May" class="btn btn-info" style="margin: 1px">May</div>
#>   <div data-value="Jun" class="btn btn-info" style="margin: 1px">Jun</div>
#>   <div data-value="Jul" class="btn btn-info" style="margin: 1px">Jul</div>
#>   <div data-value="Aug" class="btn btn-info" style="margin: 1px">Aug</div>
#>   <div data-value="Sep" class="btn btn-info" style="margin: 1px">Sep</div>
#>   <div data-value="Oct" class="btn btn-info" style="margin: 1px">Oct</div>
#>   <div data-value="Nov" class="btn btn-info" style="margin: 1px">Nov</div>
#>   <div data-value="Dec" class="btn btn-info" style="margin: 1px">Dec</div>
#> </div>
#> <iframe srcdoc="&lt;p&gt;cant catch me&lt;/p&gt;" class="jqui_self_cleaning_script" style="width:0;height:0;border:none;display:none !important" onload="$(function(){setTimeout(function(){shinyjqui.msgCallback({&quot;ui&quot;:&quot;[id=&#39;items1&#39;]&quot;,&quot;type&quot;:&quot;interaction&quot;,&quot;func&quot;:&quot;sortable&quot;,&quot;operation&quot;:&quot;enable&quot;,&quot;options&quot;:{&quot;connectWith&quot;:&quot;false&quot;,&quot;remove&quot;:&quot;function(e, ui){if(!$(e.target).children().length)$(e.target).empty();}&quot;},&quot;debug&quot;:false,&quot;_js_idx&quot;:{&quot;ui&quot;:false,&quot;type&quot;:false,&quot;func&quot;:false,&quot;operation&quot;:false,&quot;options&quot;:{&quot;connectWith&quot;:false,&quot;remove&quot;:true},&quot;debug&quot;:false}});&#10;      $(&quot;.jqui_self_cleaning_script&quot;).remove();}, 10);});"></iframe>

## build connections between orderInputs
orderInput('items2', 'Items2 (can be moved to Items1 and Items4)', items = month.abb,
           connect = c('items1', 'items4'), item_class = 'primary')
#> <label class="control-label" id="items2-label" for="items2">Items2 (can be moved to Items1 and Items4)</label>
#> <div id="items2" style="width: 500px; font-size: 0px; min-height: 25px;" class="jqui-orderInput">
#>   <div data-value="Jan" class="btn btn-primary" style="margin: 1px">Jan</div>
#>   <div data-value="Feb" class="btn btn-primary" style="margin: 1px">Feb</div>
#>   <div data-value="Mar" class="btn btn-primary" style="margin: 1px">Mar</div>
#>   <div data-value="Apr" class="btn btn-primary" style="margin: 1px">Apr</div>
#>   <div data-value="May" class="btn btn-primary" style="margin: 1px">May</div>
#>   <div data-value="Jun" class="btn btn-primary" style="margin: 1px">Jun</div>
#>   <div data-value="Jul" class="btn btn-primary" style="margin: 1px">Jul</div>
#>   <div data-value="Aug" class="btn btn-primary" style="margin: 1px">Aug</div>
#>   <div data-value="Sep" class="btn btn-primary" style="margin: 1px">Sep</div>
#>   <div data-value="Oct" class="btn btn-primary" style="margin: 1px">Oct</div>
#>   <div data-value="Nov" class="btn btn-primary" style="margin: 1px">Nov</div>
#>   <div data-value="Dec" class="btn btn-primary" style="margin: 1px">Dec</div>
#> </div>
#> <iframe srcdoc="&lt;p&gt;cant catch me&lt;/p&gt;" class="jqui_self_cleaning_script" style="width:0;height:0;border:none;display:none !important" onload="$(function(){setTimeout(function(){shinyjqui.msgCallback({&quot;ui&quot;:&quot;[id=&#39;items2&#39;]&quot;,&quot;type&quot;:&quot;interaction&quot;,&quot;func&quot;:&quot;sortable&quot;,&quot;operation&quot;:&quot;enable&quot;,&quot;options&quot;:{&quot;connectWith&quot;:&quot;#items1, #items4&quot;,&quot;remove&quot;:&quot;function(e, ui){if(!$(e.target).children().length)$(e.target).empty();}&quot;},&quot;debug&quot;:false,&quot;_js_idx&quot;:{&quot;ui&quot;:false,&quot;type&quot;:false,&quot;func&quot;:false,&quot;operation&quot;:false,&quot;options&quot;:{&quot;connectWith&quot;:false,&quot;remove&quot;:true},&quot;debug&quot;:false}});&#10;      $(&quot;.jqui_self_cleaning_script&quot;).remove();}, 10);});"></iframe>

## build connections in source mode
orderInput('items3', 'Items3 (can be copied to Items2 and Items4)', items = month.abb,
           as_source = TRUE, connect = c('items2', 'items4'), item_class = 'success')
#> <label class="control-label" id="items3-label" for="items3">Items3 (can be copied to Items2 and Items4)</label>
#> <div id="items3" style="width: 500px; font-size: 0px; min-height: 25px;" class="jqui-orderInput-source">
#>   <div class="btn btn-success jqui-interaction-oqxCc0QL" data-value="Jan" style="margin: 1px">Jan</div>
#>   <iframe srcdoc="&lt;p&gt;cant catch me&lt;/p&gt;" class="jqui_self_cleaning_script" style="width:0;height:0;border:none;display:none !important" onload="$(function(){setTimeout(function(){shinyjqui.msgCallback({&quot;ui&quot;:&quot;.jqui-interaction-oqxCc0QL&quot;,&quot;type&quot;:&quot;interaction&quot;,&quot;func&quot;:&quot;draggable&quot;,&quot;operation&quot;:&quot;enable&quot;,&quot;options&quot;:{&quot;connectToSortable&quot;:&quot;#items2, #items4&quot;,&quot;helper&quot;:&quot;clone&quot;,&quot;cancel&quot;:&quot;&quot;},&quot;debug&quot;:false,&quot;_js_idx&quot;:{&quot;ui&quot;:false,&quot;type&quot;:false,&quot;func&quot;:false,&quot;operation&quot;:false,&quot;options&quot;:{&quot;connectToSortable&quot;:false,&quot;helper&quot;:false,&quot;cancel&quot;:false},&quot;debug&quot;:false}});&#10;      $(&quot;.jqui_self_cleaning_script&quot;).remove();}, 10);});"></iframe>
#>   <div class="btn btn-success jqui-interaction-ioIk9gYI" data-value="Feb" style="margin: 1px">Feb</div>
#>   <iframe srcdoc="&lt;p&gt;cant catch me&lt;/p&gt;" class="jqui_self_cleaning_script" style="width:0;height:0;border:none;display:none !important" onload="$(function(){setTimeout(function(){shinyjqui.msgCallback({&quot;ui&quot;:&quot;.jqui-interaction-ioIk9gYI&quot;,&quot;type&quot;:&quot;interaction&quot;,&quot;func&quot;:&quot;draggable&quot;,&quot;operation&quot;:&quot;enable&quot;,&quot;options&quot;:{&quot;connectToSortable&quot;:&quot;#items2, #items4&quot;,&quot;helper&quot;:&quot;clone&quot;,&quot;cancel&quot;:&quot;&quot;},&quot;debug&quot;:false,&quot;_js_idx&quot;:{&quot;ui&quot;:false,&quot;type&quot;:false,&quot;func&quot;:false,&quot;operation&quot;:false,&quot;options&quot;:{&quot;connectToSortable&quot;:false,&quot;helper&quot;:false,&quot;cancel&quot;:false},&quot;debug&quot;:false}});&#10;      $(&quot;.jqui_self_cleaning_script&quot;).remove();}, 10);});"></iframe>
#>   <div class="btn btn-success jqui-interaction-xQlr5FMV" data-value="Mar" style="margin: 1px">Mar</div>
#>   <iframe srcdoc="&lt;p&gt;cant catch me&lt;/p&gt;" class="jqui_self_cleaning_script" style="width:0;height:0;border:none;display:none !important" onload="$(function(){setTimeout(function(){shinyjqui.msgCallback({&quot;ui&quot;:&quot;.jqui-interaction-xQlr5FMV&quot;,&quot;type&quot;:&quot;interaction&quot;,&quot;func&quot;:&quot;draggable&quot;,&quot;operation&quot;:&quot;enable&quot;,&quot;options&quot;:{&quot;connectToSortable&quot;:&quot;#items2, #items4&quot;,&quot;helper&quot;:&quot;clone&quot;,&quot;cancel&quot;:&quot;&quot;},&quot;debug&quot;:false,&quot;_js_idx&quot;:{&quot;ui&quot;:false,&quot;type&quot;:false,&quot;func&quot;:false,&quot;operation&quot;:false,&quot;options&quot;:{&quot;connectToSortable&quot;:false,&quot;helper&quot;:false,&quot;cancel&quot;:false},&quot;debug&quot;:false}});&#10;      $(&quot;.jqui_self_cleaning_script&quot;).remove();}, 10);});"></iframe>
#>   <div class="btn btn-success jqui-interaction-PktEbeoT" data-value="Apr" style="margin: 1px">Apr</div>
#>   <iframe srcdoc="&lt;p&gt;cant catch me&lt;/p&gt;" class="jqui_self_cleaning_script" style="width:0;height:0;border:none;display:none !important" onload="$(function(){setTimeout(function(){shinyjqui.msgCallback({&quot;ui&quot;:&quot;.jqui-interaction-PktEbeoT&quot;,&quot;type&quot;:&quot;interaction&quot;,&quot;func&quot;:&quot;draggable&quot;,&quot;operation&quot;:&quot;enable&quot;,&quot;options&quot;:{&quot;connectToSortable&quot;:&quot;#items2, #items4&quot;,&quot;helper&quot;:&quot;clone&quot;,&quot;cancel&quot;:&quot;&quot;},&quot;debug&quot;:false,&quot;_js_idx&quot;:{&quot;ui&quot;:false,&quot;type&quot;:false,&quot;func&quot;:false,&quot;operation&quot;:false,&quot;options&quot;:{&quot;connectToSortable&quot;:false,&quot;helper&quot;:false,&quot;cancel&quot;:false},&quot;debug&quot;:false}});&#10;      $(&quot;.jqui_self_cleaning_script&quot;).remove();}, 10);});"></iframe>
#>   <div class="btn btn-success jqui-interaction-wJ3OobeH" data-value="May" style="margin: 1px">May</div>
#>   <iframe srcdoc="&lt;p&gt;cant catch me&lt;/p&gt;" class="jqui_self_cleaning_script" style="width:0;height:0;border:none;display:none !important" onload="$(function(){setTimeout(function(){shinyjqui.msgCallback({&quot;ui&quot;:&quot;.jqui-interaction-wJ3OobeH&quot;,&quot;type&quot;:&quot;interaction&quot;,&quot;func&quot;:&quot;draggable&quot;,&quot;operation&quot;:&quot;enable&quot;,&quot;options&quot;:{&quot;connectToSortable&quot;:&quot;#items2, #items4&quot;,&quot;helper&quot;:&quot;clone&quot;,&quot;cancel&quot;:&quot;&quot;},&quot;debug&quot;:false,&quot;_js_idx&quot;:{&quot;ui&quot;:false,&quot;type&quot;:false,&quot;func&quot;:false,&quot;operation&quot;:false,&quot;options&quot;:{&quot;connectToSortable&quot;:false,&quot;helper&quot;:false,&quot;cancel&quot;:false},&quot;debug&quot;:false}});&#10;      $(&quot;.jqui_self_cleaning_script&quot;).remove();}, 10);});"></iframe>
#>   <div class="btn btn-success jqui-interaction-wiZZLXDm" data-value="Jun" style="margin: 1px">Jun</div>
#>   <iframe srcdoc="&lt;p&gt;cant catch me&lt;/p&gt;" class="jqui_self_cleaning_script" style="width:0;height:0;border:none;display:none !important" onload="$(function(){setTimeout(function(){shinyjqui.msgCallback({&quot;ui&quot;:&quot;.jqui-interaction-wiZZLXDm&quot;,&quot;type&quot;:&quot;interaction&quot;,&quot;func&quot;:&quot;draggable&quot;,&quot;operation&quot;:&quot;enable&quot;,&quot;options&quot;:{&quot;connectToSortable&quot;:&quot;#items2, #items4&quot;,&quot;helper&quot;:&quot;clone&quot;,&quot;cancel&quot;:&quot;&quot;},&quot;debug&quot;:false,&quot;_js_idx&quot;:{&quot;ui&quot;:false,&quot;type&quot;:false,&quot;func&quot;:false,&quot;operation&quot;:false,&quot;options&quot;:{&quot;connectToSortable&quot;:false,&quot;helper&quot;:false,&quot;cancel&quot;:false},&quot;debug&quot;:false}});&#10;      $(&quot;.jqui_self_cleaning_script&quot;).remove();}, 10);});"></iframe>
#>   <div class="btn btn-success jqui-interaction-xWEEOk0E" data-value="Jul" style="margin: 1px">Jul</div>
#>   <iframe srcdoc="&lt;p&gt;cant catch me&lt;/p&gt;" class="jqui_self_cleaning_script" style="width:0;height:0;border:none;display:none !important" onload="$(function(){setTimeout(function(){shinyjqui.msgCallback({&quot;ui&quot;:&quot;.jqui-interaction-xWEEOk0E&quot;,&quot;type&quot;:&quot;interaction&quot;,&quot;func&quot;:&quot;draggable&quot;,&quot;operation&quot;:&quot;enable&quot;,&quot;options&quot;:{&quot;connectToSortable&quot;:&quot;#items2, #items4&quot;,&quot;helper&quot;:&quot;clone&quot;,&quot;cancel&quot;:&quot;&quot;},&quot;debug&quot;:false,&quot;_js_idx&quot;:{&quot;ui&quot;:false,&quot;type&quot;:false,&quot;func&quot;:false,&quot;operation&quot;:false,&quot;options&quot;:{&quot;connectToSortable&quot;:false,&quot;helper&quot;:false,&quot;cancel&quot;:false},&quot;debug&quot;:false}});&#10;      $(&quot;.jqui_self_cleaning_script&quot;).remove();}, 10);});"></iframe>
#>   <div class="btn btn-success jqui-interaction-c9Kar7pz" data-value="Aug" style="margin: 1px">Aug</div>
#>   <iframe srcdoc="&lt;p&gt;cant catch me&lt;/p&gt;" class="jqui_self_cleaning_script" style="width:0;height:0;border:none;display:none !important" onload="$(function(){setTimeout(function(){shinyjqui.msgCallback({&quot;ui&quot;:&quot;.jqui-interaction-c9Kar7pz&quot;,&quot;type&quot;:&quot;interaction&quot;,&quot;func&quot;:&quot;draggable&quot;,&quot;operation&quot;:&quot;enable&quot;,&quot;options&quot;:{&quot;connectToSortable&quot;:&quot;#items2, #items4&quot;,&quot;helper&quot;:&quot;clone&quot;,&quot;cancel&quot;:&quot;&quot;},&quot;debug&quot;:false,&quot;_js_idx&quot;:{&quot;ui&quot;:false,&quot;type&quot;:false,&quot;func&quot;:false,&quot;operation&quot;:false,&quot;options&quot;:{&quot;connectToSortable&quot;:false,&quot;helper&quot;:false,&quot;cancel&quot;:false},&quot;debug&quot;:false}});&#10;      $(&quot;.jqui_self_cleaning_script&quot;).remove();}, 10);});"></iframe>
#>   <div class="btn btn-success jqui-interaction-LSEUur2W" data-value="Sep" style="margin: 1px">Sep</div>
#>   <iframe srcdoc="&lt;p&gt;cant catch me&lt;/p&gt;" class="jqui_self_cleaning_script" style="width:0;height:0;border:none;display:none !important" onload="$(function(){setTimeout(function(){shinyjqui.msgCallback({&quot;ui&quot;:&quot;.jqui-interaction-LSEUur2W&quot;,&quot;type&quot;:&quot;interaction&quot;,&quot;func&quot;:&quot;draggable&quot;,&quot;operation&quot;:&quot;enable&quot;,&quot;options&quot;:{&quot;connectToSortable&quot;:&quot;#items2, #items4&quot;,&quot;helper&quot;:&quot;clone&quot;,&quot;cancel&quot;:&quot;&quot;},&quot;debug&quot;:false,&quot;_js_idx&quot;:{&quot;ui&quot;:false,&quot;type&quot;:false,&quot;func&quot;:false,&quot;operation&quot;:false,&quot;options&quot;:{&quot;connectToSortable&quot;:false,&quot;helper&quot;:false,&quot;cancel&quot;:false},&quot;debug&quot;:false}});&#10;      $(&quot;.jqui_self_cleaning_script&quot;).remove();}, 10);});"></iframe>
#>   <div class="btn btn-success jqui-interaction-wI9ao1be" data-value="Oct" style="margin: 1px">Oct</div>
#>   <iframe srcdoc="&lt;p&gt;cant catch me&lt;/p&gt;" class="jqui_self_cleaning_script" style="width:0;height:0;border:none;display:none !important" onload="$(function(){setTimeout(function(){shinyjqui.msgCallback({&quot;ui&quot;:&quot;.jqui-interaction-wI9ao1be&quot;,&quot;type&quot;:&quot;interaction&quot;,&quot;func&quot;:&quot;draggable&quot;,&quot;operation&quot;:&quot;enable&quot;,&quot;options&quot;:{&quot;connectToSortable&quot;:&quot;#items2, #items4&quot;,&quot;helper&quot;:&quot;clone&quot;,&quot;cancel&quot;:&quot;&quot;},&quot;debug&quot;:false,&quot;_js_idx&quot;:{&quot;ui&quot;:false,&quot;type&quot;:false,&quot;func&quot;:false,&quot;operation&quot;:false,&quot;options&quot;:{&quot;connectToSortable&quot;:false,&quot;helper&quot;:false,&quot;cancel&quot;:false},&quot;debug&quot;:false}});&#10;      $(&quot;.jqui_self_cleaning_script&quot;).remove();}, 10);});"></iframe>
#>   <div class="btn btn-success jqui-interaction-1ODhhQXM" data-value="Nov" style="margin: 1px">Nov</div>
#>   <iframe srcdoc="&lt;p&gt;cant catch me&lt;/p&gt;" class="jqui_self_cleaning_script" style="width:0;height:0;border:none;display:none !important" onload="$(function(){setTimeout(function(){shinyjqui.msgCallback({&quot;ui&quot;:&quot;.jqui-interaction-1ODhhQXM&quot;,&quot;type&quot;:&quot;interaction&quot;,&quot;func&quot;:&quot;draggable&quot;,&quot;operation&quot;:&quot;enable&quot;,&quot;options&quot;:{&quot;connectToSortable&quot;:&quot;#items2, #items4&quot;,&quot;helper&quot;:&quot;clone&quot;,&quot;cancel&quot;:&quot;&quot;},&quot;debug&quot;:false,&quot;_js_idx&quot;:{&quot;ui&quot;:false,&quot;type&quot;:false,&quot;func&quot;:false,&quot;operation&quot;:false,&quot;options&quot;:{&quot;connectToSortable&quot;:false,&quot;helper&quot;:false,&quot;cancel&quot;:false},&quot;debug&quot;:false}});&#10;      $(&quot;.jqui_self_cleaning_script&quot;).remove();}, 10);});"></iframe>
#>   <div class="btn btn-success jqui-interaction-EksIX1CK" data-value="Dec" style="margin: 1px">Dec</div>
#>   <iframe srcdoc="&lt;p&gt;cant catch me&lt;/p&gt;" class="jqui_self_cleaning_script" style="width:0;height:0;border:none;display:none !important" onload="$(function(){setTimeout(function(){shinyjqui.msgCallback({&quot;ui&quot;:&quot;.jqui-interaction-EksIX1CK&quot;,&quot;type&quot;:&quot;interaction&quot;,&quot;func&quot;:&quot;draggable&quot;,&quot;operation&quot;:&quot;enable&quot;,&quot;options&quot;:{&quot;connectToSortable&quot;:&quot;#items2, #items4&quot;,&quot;helper&quot;:&quot;clone&quot;,&quot;cancel&quot;:&quot;&quot;},&quot;debug&quot;:false,&quot;_js_idx&quot;:{&quot;ui&quot;:false,&quot;type&quot;:false,&quot;func&quot;:false,&quot;operation&quot;:false,&quot;options&quot;:{&quot;connectToSortable&quot;:false,&quot;helper&quot;:false,&quot;cancel&quot;:false},&quot;debug&quot;:false}});&#10;      $(&quot;.jqui_self_cleaning_script&quot;).remove();}, 10);});"></iframe>
#> </div>
#> <iframe srcdoc="&lt;p&gt;cant catch me&lt;/p&gt;" class="jqui_self_cleaning_script" style="width:0;height:0;border:none;display:none !important" onload="$(function(){setTimeout(function(){shinyjqui.msgCallback({&quot;ui&quot;:&quot;[id=&#39;items3&#39;]&quot;,&quot;type&quot;:&quot;interaction&quot;,&quot;func&quot;:&quot;droppable&quot;,&quot;operation&quot;:&quot;enable&quot;,&quot;options&quot;:{&quot;drop&quot;:&quot;function(e, ui) { $(ui.helper).remove(); }&quot;,&quot;classes&quot;:{&quot;ui-droppable-hover&quot;:&quot;ui-state-error&quot;},&quot;accept&quot;:&quot;:not(.jqui-orderInput-source *)&quot;},&quot;debug&quot;:false,&quot;_js_idx&quot;:{&quot;ui&quot;:false,&quot;type&quot;:false,&quot;func&quot;:false,&quot;operation&quot;:false,&quot;options&quot;:{&quot;drop&quot;:true,&quot;classes&quot;:{&quot;ui-droppable-hover&quot;:false},&quot;accept&quot;:false},&quot;debug&quot;:false}});&#10;      $(&quot;.jqui_self_cleaning_script&quot;).remove();}, 10);});"></iframe>

## show placeholder
orderInput('items4', 'Items4 (can be moved to Items2)', items = NULL, connect = 'items2',
           placeholder = 'Drag items here...')
#> <label class="control-label" id="items4-label" for="items4">Items4 (can be moved to Items2)</label>
#> <div id="items4" style="width: 500px; font-size: 0px; min-height: 25px;" class="jqui-orderInput"></div>
#> <iframe srcdoc="&lt;p&gt;cant catch me&lt;/p&gt;" class="jqui_self_cleaning_script" style="width:0;height:0;border:none;display:none !important" onload="$(function(){setTimeout(function(){shinyjqui.msgCallback({&quot;ui&quot;:&quot;[id=&#39;items4&#39;]&quot;,&quot;type&quot;:&quot;interaction&quot;,&quot;func&quot;:&quot;sortable&quot;,&quot;operation&quot;:&quot;enable&quot;,&quot;options&quot;:{&quot;connectWith&quot;:&quot;#items2&quot;,&quot;remove&quot;:&quot;function(e, ui){if(!$(e.target).children().length)$(e.target).empty();}&quot;},&quot;debug&quot;:false,&quot;_js_idx&quot;:{&quot;ui&quot;:false,&quot;type&quot;:false,&quot;func&quot;:false,&quot;operation&quot;:false,&quot;options&quot;:{&quot;connectWith&quot;:false,&quot;remove&quot;:true},&quot;debug&quot;:false}});&#10;      $(&quot;.jqui_self_cleaning_script&quot;).remove();}, 10);});"></iframe>