Draggable Basic
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
<script>
$( "#draggable" ).draggable();
</script>
border: 1px solid var(--border);
background: var(--rgba-primary-1);
width: 200px;
height: 200px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 8px;
box-shadow: rgba(90, 69, 170, 0.09) 0px 8px 24px;
color: var(--primary);
Custom container
<div id="draggable-1" class="ui-widget-content">
<p>Drag me around</p>
</div>
<script>
$( "#draggable-1" ).draggable();
</script>
border: 1px solid var(--border);
background: var(--rgba-primary-1);
width: 200px;
height: 200px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 8px;
box-shadow: rgba(90, 69, 170, 0.09) 0px 8px 24px;
color: var(--primary);
Blocked axis
<div id="draggable-2" class="ui-widget-content">
<p>Drag me around</p>
</div>
<div id="draggable-3" class="ui-widget-content">
<p>Drag me around</p>
</div>
<script>
$( "#draggable-2" ).draggable({ axis: "y" });
$( "#draggable-3" ).draggable({ axis: "x" });
</script>
border: 1px solid var(--border);
background: var(--rgba-primary-1);
width: 200px;
height: 200px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 8px;
box-shadow: rgba(90, 69, 170, 0.09) 0px 8px 24px;
color: var(--primary);
Disabled
<div id="draggable-4" class="ui-widget-content">
<p>Drag me around</p>
</div>
<script>
$("#draggable-4").draggable("disable")
</script>
border: 1px solid var(--border);
background: var(--rgba-primary-1);
width: 200px;
height: 200px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 8px;
box-shadow: rgba(90, 69, 170, 0.09) 0px 8px 24px;
color: var(--primary);
Sortable basic example
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
<script>
$( "#sortable" ).sortable({
revert: true
});
</script>
border: 1px solid var(--border);
background: var(--rgba-primary-1);
width: 200px;
height: 200px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 8px;
box-shadow: rgba(90, 69, 170, 0.09) 0px 8px 24px;
color: var(--primary);
Sortable Grid
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
<div id="sortable-grid">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
<div class="grid-item">Item 7</div>
<div class="grid-item">Item 8</div>
<div class="grid-item">Item 9</div>
</div>
<script>
const sortableGrid = document.getElementById('sortable-grid');
new Sortable(sortableGrid, {
animation: 150,
ghostClass: 'sortable-ghost',
swapThreshold: 0.5,
draggable: '.grid-item',
handle: '.grid-item'
});
border: 1px solid var(--border);
background: var(--rgba-primary-1);
width: 200px;
height: 200px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 8px;
box-shadow: rgba(90, 69, 170, 0.09) 0px 8px 24px;
color: var(--primary);