<
# Drag & Drop Editor
This example demonstrates a drag-and-drop editor using the library [SBOL Visual
CSS](../index.html) for SBOL symbols visualization.
The drag-and-drop mechanism is powered by the [Dragula](https://bevacqua.github.io/dragula/) library.
Drag the genetic parts from the inventory into the construct box, or directly from the inventory to change their place.
#### INVENTORY
<ul id="inventory" class="dragula-container horizontal">
<li class="dragula-li">
<div class="sbolv promoter">promoter 1</div>
</li>
<li class="dragula-li">
<div class="sbolv promoter">promoter 2</div>
</li>
<li class="dragula-li">
<div class="sbolv cds">gene 1</div>
</li>
<li class="dragula-li">
<div class="sbolv cds">gene with a very long name</div>
</li>
<li class="dragula-li">
<div class="sbolv terminator">terminator 1</div>
</li>
<li class="dragula-li">
<div class="sbolv terminator">terminator 2</div>
</li>
</ul>
#### CONSTRUCT </h4>
<ul id="sequence" class="dragula-container horizontal"></ul>
### Code for this example
HTML:
```
<h4> INVENTORY </h4>
<ul id="inventory" class="dragula-container horizontal">
<li class="dragula-li">
<div class="sbolv promoter">promoter 1</div>
</li>
<li class="dragula-li">
<div class="sbolv promoter">promoter 2</div>
</li>
<li class="dragula-li">
<div class="sbolv cds">gene 1</div>
</li>
<li class="dragula-li">
<div class="sbolv cds">gene with a very long name</div>
</li>
<li class="dragula-li">
<div class="sbolv terminator">terminator 1</div>
</li>
<li class="dragula-li">
<div class="sbolv terminator">terminator 2</div>
</li>
</ul>
<h4> CONSTRUCT </h4>
<ul id="sequence" class="dragula-container horizontal"></ul>
```
JavaScript:
```
dragula(
[document.getElementById("inventory"),
document.getElementById("sequence")], {
copy: function (el, source) {
return source === document.getElementById("inventory")
},
removeOnSpill: true,
direction: "horizontal",
accepts: function (el, target) {
return target !== document.getElementById("inventory")
}
})
```
]]>