17

I'm working with a demo of two sortable jquery lists... but have a problem when one list is empty, I can no longer drag items onto it, because there is nothing there to drop on. I tried adding space to the margin, padding and line-height of the ul, but nothing seems to work. Any ideas?

<style type="text/css">
#sortable1, #sortable2 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: left;
    margin-right: 10px;
}
#sortable1 li, #sortable2 li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}
</style>
<script type="text/javascript">
$(function() {
    $("#sortable1, #sortable2").sortable({
        connectWith: '.connectedSortable'
    }).disableSelection();
});
</script>

<ul id="sortable1" class="connectedSortable">
<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>

<ul id="sortable2" class="connectedSortable">
</ul>

3 Answers 3

35

Frederik's answer didnt work for me

solution for me was to add a min-height to the empty ul

ref: http://rolleys.wordpress.com/2010/05/18/cant-get-jquery-sortable-to-drop-on-to-empty-lists/

3
  • Saved me. Thanks a bunch. Feb 21, 2017 at 14:44
  • This worked for me.. I would still like to know why? I get that an empty list has a height of 0 and so it's not rendered visually. However shouldn't it still be able to be interacted with?
    – ksudu94
    Jan 21, 2020 at 20:51
  • 1
    @kusudu94 when dragging a DOM element, the script tries to identify where in the DOM it has been dragged to, by checking what other elements it intersects with. The dragged element will never intersect with the target list if it has height=0
    – zack
    Apr 29, 2020 at 9:30
15

Set the dropOnEmpty property to true. See http://jqueryui.com/demos/sortable/#empty-lists for more information.

2
  • 1
    Thanks - that works. I hate it when I search for something and the answer was on the same page :) Feb 25, 2010 at 18:12
  • haha, It is funny, Ok, I have a question for you , What if the source is the draggable . It does't have the dropOnEmpty property. thanks.
    – Joe.wang
    Mar 8, 2013 at 1:33
0

I don't know if by the time of question and the answers this was available, but as 2018 you can use the option placeholder and problem solved! (with little help of css)

http://api.jqueryui.com/sortable/#option-placeholder

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.