Jquery UI sortable placeholder not showing up in block list
15,446
Solution 1
Your placeholder will be visible if you set height
and width
to it.
Check jsfiddle with your code: jsfiddle
Solution 2
Since the items you're dragging doesn't have an explicit height, You should use the option
If true, forces the placeholder to have a size.
No need to manually specify dimensions for placeholder.
$(document).ready(function() {
$('#sortableList').sortable({
refreshPositions: true,
opacity: 0.6,
scroll: true,
containment: 'parent',
placeholder: 'placeholder',
tolerance: 'pointer',
forcePlaceholderSize: true // <--- add this
}).disableSelection();
});
.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="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.js"></script>
<div class='sequencer'>
<ul id='sortableList'>
<li>
<img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage1</li>
<li>
<img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage2</li>
<li>
<img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage3</li>
<li>
<img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage4</li>
<li>
<img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage5</li>
</ul>
</div>
JSFiddle
Author by
achow
Updated on June 14, 2022Comments
-
achow almost 2 years
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() { $('#sortableList').sortable({ refreshPositions: true, opacity: 0.6, scroll: true, containment: 'parent', placeholder: 'placeholder', tolerance: 'pointer' }).disableSelection(); });
.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="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.js"></script> <div class='sequencer'> <ul id='sortableList'> <li> <img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage1</li> <li> <img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage2</li> <li> <img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage3</li> <li> <img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage4</li> <li> <img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage5</li> </ul> </div>