Question

I am having problems with what should be a simple jQuery-UI droppable/sortable list. In the source list I have several draggable LI elements and my destination list uses the last child as the drop target.

I’m having two problems:

1) Even though I’m using insertBefore the last-child it is inserting after.

2) The drop target formatting behaves strangely after the drop. The block drops down as if it has a margin on the top. It should stay in line with the newly created list elements.

Here is the fiddle to demonstrate the issue. Drag column names from the top list to the drop target in the bottom element. To keep the code here in the question as well here are the various sections:

HTML:

<div id="report_builder">
<ul id="columns" class="column_list">
    <li  id="null"  rel="recid"  >Id
    </li>

    <li  id="null"  rel="street1"  >Address
    </li>

    <li  id="null"  rel="street2"  >Address 2
    </li>
</ul>
<br/><br/>
<ul id="report_layout_1" class="report_layout">
    <li>
    <span id="null_form" ><span  id="null"  >Drop Field Here</span></span>
    </li>
</ul>
</div>​

Javascript:

jQuery("ul.column_list > li").draggable({
    appendTo: "#report_layout_1",
    cursor: 'move',
    helper: "clone"
});

sortOptions = {
    placeholder: "ui-state-highlight",
    forcePlaceholderSize: true,
    axis: 'x',
    opacity: 0.8,
    items: "li:not(li:last-child)",
    cancel: "li:last-child, input, select"
};

dropOptions = {
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: ":not(.report_layout > li)",
    drop: function( event, ui ) {                
        jQuery( this ).find( ".placeholder" ).remove();
        var tableColumn = ui.draggable.attr('rel');
        jQuery( "<li rel=\"" + tableColumn + "\"></li>" ).html( ui.draggable.text() + '<br/><input type="text" class="report-column-value"/><br/><br/>').insertBefore( jQuery("li:last-child", jQuery(this).parent()) );
    }
});        
jQuery(".report_layout > li:last-child").droppable(dropOptions);
jQuery( ".report_layout" ).sortable(sortOptions);

CSS:

#report_builder li {
    font-size: 8pt;
}

#report_builder > ul {
    border: 2px solid black;
    margin-left: 10px;
}

.droppable {
    margin: 0;
    vertical-align: top;
}

ul.column_list {
    width: 100px;
}

ul.column_list > li {
    padding: 5px;
    border: 1px solid #ccc;
    border-top: 10px solid #ccc;
    cursor: move;
}
.report_layout {
    height: 150px;
}
.report_layout > li {
    display: inline-block;
    padding: 5px;
    margin-left: 2px;
    border: 1px solid #ccc;
    border-top: 10px solid #ccc;
    height: 100px;
    background-color:#fff;
}
.report_layout > li:last {
    cursor: default;
}
.report_layout > li a {
    cursor: pointer;
}
.report_layout > li:nth-child(even) {
    background-color:#eee;
}

.report_layout .droppable {
    margin: 10;
}

#report_builder .ui-draggable-dragging {
    display: inline-block;
    padding: 5px;
    border: 1px solid #ccc;
    border-top: 10px solid #ccc;
    background-color: white;
    z-index: 21000;
}
#report_builder input.report-column-value {
    width: 95px;
}

​

Answer 1

You’re using appendTo: "#report_layout_1" in your draggable, so when dragging the last li in #report_layout_1 is the draggable helper, which also equals jQuery("li:last-child", jQuery(this)) in your .drop function.

Hope this makes sense.

So the easiest fix would be to append the draggable to something else; otherwise change the insertBefore target.

See fiddle (if you don’t specify appendTo the helper gets appended to the draggable’s parent)