Пользовательский интерфейс jQuery и сортировка по горизонтали - элементы, перемещаемые влево при перетаскивании

Question

Пользовательский интерфейс jQuery и сортировка по горизонтали - элементы, перемещаемые влево при перетаскивании

0

Пример:

Как только я начну перетаскивать элемент, следующие немного сдвинутся влево.

Плавающие элементы являются общим решением для горизонтальной сортировки, но мне интересно, есть ли способ остановить перемещение элементов при перетаскивании?

Css:

#draggable1 { background:#ff0000; width: 150px; height: 35px; padding: 0.5em; }
#draggable2 { background:#00ff00; width: 150px; height: 35px; padding: 0.5em; }
#draggable3 { background:#0000ff; width: 150px; height: 35px; padding: 0.5em; }

#sortable { width: 700px; height: 35px;  }

#sortable > div { float: left; }

Jorg Ancrath 20 сен. 2013, в 17:01

Источник

Теги:

jquery

css

jquery-ui

2 ответа

1

Вам нужно объявить местозаполнитель и определить его класс в вашем CSS как тот же размер, что и ваши элементы. Код приведен ниже, и здесь для вас есть рабочий jsfiddle: http://jsfiddle.net/sP3UZ/2706/

Также для хорошей меры, вот ссылка на документацию с заполнителем: http://api.jqueryui.com/sortable/#option-placeholder

HTML

<div class="demo">
    <div id="sortable" class="ui-state-default">
        <div id = "draggable1" class="ui-state-default">Home</div>
        <div id = "draggable2" class="ui-state-default">Contact Us</div>
        <div id = "draggable3" class="ui-state-default">FAQs</div>
    </div>
</div>

CSS

#draggable1 { 
    background:#ff0000; 
    width: 150px; 
    height: 35px; 
    padding: 0.5em; 
}
#draggable2 { 
    background:#00ff00; 
    width: 150px; 
    height: 35px; 
    padding: 0.5em; 
}
#draggable3 { 
    background:#0000ff; 
    width: 150px; 
    height: 35px; 
    padding: 0.5em; 
}
#sortable { 
    width: 700px; 
    height: 35px;  
}
#sortable > div { 
    float: left; 
}
.sortable-placeholder {
    width: 150px; height: 35px; padding: 0.5em;
}

JS

$("#sortable").sortable({
    revert: true,
    placeholder: "sortable-placeholder"
});

Удачи!

Лучший,

мистифицировать

Joshua Robinson 03 окт. 2013, в 02:29

Ещё вопросы

Romain · Accepted Answer · 2013-09-20T11-53-00.000Z

Это связано с тем, что вы используете отступы для каждого перетаскиваемого div (padding: 0.5em;). Вам нужно удалить его и создать для него новый контейнер.

Обработать:

Добавьте p-тэг в div div.
Удалите дополнение вашего перетаскиваемого div и его к новому тегу (здесь)

И твой хороший ход =)

Here is an example: Пример