achow achow - 8 months ago 37
Javascript Question

Jquery UI sortable placeholder not showing up in block list

I have a few items in a ul being displayed as an inline-block. I'm able to sort them with jquery ui's sortable, but the placeholder is not showing up.

$(document).ready(function() {
refreshPositions: true,
opacity: 0.6,
scroll: true,
containment: 'parent',
placeholder: 'placeholder',
tolerance: 'pointer'

.sequencer {
height: 110px;
width: 600px;
overflow-y: hidden;
overflow-x: hidden;
.sequencer ul {
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
.sequencer li {
display: inline-block;
padding-right: 10px;
padding-left: 10px;
text-align: center;
.sequencer img {
display: block;
height: 50px;
.placeholder {
background: #f3f3f3;
visibility: visible;

<script src=""></script>
<script src=""></script>
<div class='sequencer'>
<ul id='sortableList'>
<img src='' />rage1</li>
<img src='' />rage2</li>
<img src='' />rage3</li>
<img src='' />rage4</li>
<img src='' />rage5</li>


Your placeholder will be visible if you set height and width to it.

Check jsfiddle with your code: jsfiddle