2

Добрый день!

Допустим, есть следующая разметка:

<div id="someId"
   <ul id="someList">
       <li>First item</li>
       <li>Second item</li>
       <li>Third item</li>
   </ul>
</div>

Ширина родительского дива намного больше ширины списка (реальность этого значения особого значения не имеет). Главное, что справа от списка осталось место для перетаскивания элементов <li>. Использую плагин jQuery.draggable().

$(function(){ $(#someList li).draggable(); });

Всё работает. Но для меня принципиально сохранить поведение аналогичного плагина jQuery.sortable(). Именно не сортировку, а именно поведение элементов. Если не понятно - при применении этого плагина сортируемые элементы занимают новое положение строго до или после (слева-справа) следующего элемента (в зависимости где закончилось перетаскивание элемента), то есть элементы не накладываются.

Никто не подскажет как реализовать подобное поведение для плагина draggable()? чтобы элементы не накладывались друг на друга, а занимали место рядом с элементом, через которого ведётся перетаскивание. Как определить, что перетаскиваемый элемент находится в данный момент над другим элементом?

PS я использовал containment. Все нужные элементы перемещаются в одной области, как надо, не выходят за границы родительского элемента. Всё работает!только элементы накладываются друг на друга. Мне надо как раз отменить это наложение. То есть добавить к draggable поведение sortable при наложении элементов. Я подозреваю, что это делается через ui.position.left и автоматическое обновления сведений о положении элементов по завершению перетаскивания. Понимаю, что положение перетаскиваемого элемента должно сравниваться с положением уже статичных элементов, если перекрытие - двигаем элемент. Но реализовать как-то не получается.

3
  • это что бан?второй мой вопрос остаётся вообще без внимания....
    – LeD4eG
    16 июл 2012 в 15:29
  • вопрос не простой, почему вы изначально не использовали sortable? draggable предназначен для свободного перемещения элементов без взаимодействия с другими элементами
    – Spectre
    16 июл 2012 в 16:29
  • @Spectre, конечно я использовал. в sortable мне как раз не хватает именно свободного перемещения элементов....в общем, немного хочу объединить.
    – LeD4eG
    16 июл 2012 в 17:14

1 ответ 1

2

А разве в описании draggable этого нету?

http://jqueryui.com/demos/draggable/#sortable

Насколько я понял Вам надо совместить Draggable и Droppable :

<script>
    $(function() {
        $(".drag" ).draggable({containment:"#main_box", axis:"x"});

        $(".drop" ).droppable({hoverClass:"high",
                    accept:".drag",
            drop: function( event, ui ) 
            {
               var left1 = $(this).position().left;
               var left2 = ui.draggable.position().left;

               $(this).css("left",(left2 + (((left1>left2)?(+1):(-1))*ui.draggable.width()))+"px");
               //TODO: думаю имеет смыст переосмыслить позиции у всех элементов контейнера
            },

            over: function( event, ui)
            {
                $(this).css("left",ui.draggable.css("left"));
            }

        });
    });
</script>
...
<!-- Задаём контейнер так: -->
<div id="main_box" style="width:300px;height:30px;border: 1px solid;">
  <div class="drag drop" style="position:absolute;top:3px;left:0px;border:1px solid; background-color: red; width:20px;height:20px;">1</div>
  <div class="drag drop" style="position:absolute;top:3px;left:20px;border:1px solid; background-color: green; width:20px;height:20px;">2</div>
  <div class="drag drop" style="position:absolute;top:3px;left:40px;border:1px solid; background-color: blue; width:20px;height:20px;">3</div>
</div>

И, естественно, style лучше перенести в css.

А элементы тогда маркируйте двумя классами class="draggable droppable"

Да, и раз это читает @Spectre то оформите это в качестве плагина для jquery :-).

Если будут проблемы с реализацией кода перемещения наведённого элемента, пишите, помогу :-)

8
  • да, это описанного. если я не ошибаюсь, Вы предлагаете мне применить свойство connectToSortable. это немного не то. Мне нужно добавлять один элемент в сортируемый список. мне надо, что каждый элемент двигался и накладывался на своих соседей.
    – LeD4eG
    16 июл 2012 в 17:19
  • Не понимаю. Что именно вы хотите? Посмотрите пример по ссылке - я тащу элемент в список, и могу его переносить и он не накладывается на элемент, а класться рядом. Вам надо подобное, но не сверху вниз, а справа-слева ? Может вам надо типа такого повидения? jqueryui.com/demos/sortable/display-grid.html
    – Чад
    16 июл 2012 в 17:23
  • @Чад, connectToSortable используется, когда надо перетаскиваемый элемент добавить в список и там он уже сортируется в зависимости от окружения. Мне надо сделать следующее: ширина родительского блока 1600px. три элемента в списке. мы берём элемент и тащим его. перенесли-отпустили, он остаётся на месте куда перенесли (draggable). Однако, если при перетаскивании элемента, он попадает на другой элемент, то уже необходимо поведение sortable(потому что перетаскиваемые элементы накладываются друг на друга), у которого элементы не накладываются друг на друга, а устанавливаются рядом.
    – LeD4eG
    16 июл 2012 в 17:46
  • Тогда я думая вам надо совместить draggable c dropable
    – Чад
    16 июл 2012 в 18:05
  • @Чад, если бы всё так просто было!))))
    – LeD4eG
    16 июл 2012 в 18:15

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.