JQuery UI Пропускаемое форматирование и позиционирование отображаются неправильно - PullRequest
Новая
       382

JQuery UI Пропускаемое форматирование и позиционирование отображаются неправильно

0 голосов
/ 14 марта 2012

У меня проблемы с тем, что должно быть простым списком сбрасываемых / сортируемых jQuery-UI.В списке источников у меня есть несколько перетаскиваемых элементов LI, и мой список адресатов использует последний дочерний элемент в качестве цели удаления.

У меня две проблемы:

1) Даже при использованииinsertBefore последний потомок, который он вставляет после.

2) Форматирование целевого объекта отбрасывания ведет себя странно после удаления.Блок падает вниз, как будто у него есть поле сверху.Он должен оставаться в соответствии с вновь созданными элементами списка.

Вот скрипка , чтобы продемонстрировать проблему.Перетащите имена столбцов из верхнего списка в целевой объект в нижнем элементе.Чтобы сохранить код здесь, в вопросе также есть следующие разделы:

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;
}

1 Ответ

1 голос
/ 14 марта 2012

Вы используете appendTo: "#report_layout_1" в своем перетаскиваемом элементе, поэтому при перетаскивании последнего li в #report_layout_1 это перетаскиваемый помощник, который также равен jQuery("li:last-child", jQuery(this)) в вашей функции .drop.

Надеюсь, это имеет смысл.

Так что самым простым решением было бы добавить перетаскиваемый объект к чему-то еще;в противном случае измените цель insertBefore.

См. fiddle (если вы не укажете appendTo, помощник будет добавлен к родителю перетаскиваемого объекта)

...