jQuery перетащите и перетащите снова - PullRequest
Новая
       10

jQuery перетащите и перетащите снова

0 голосов
/ 18 января 2010

Я работаю над страницей перетаскивания, где вы можете перетаскивать элементы из списка в различные контейнеры, которые можно сбрасывать. Это работает отлично. То, что я сейчас пытаюсь достичь, - это иметь возможность перетаскивать их из одного контейнера в другой (или переупорядочивать их внутри контейнера). Но я не могу этого сделать.

Список выглядит как последовательность цветных полей с заголовками (у каждого есть имя класса '.item'). Когда вы перетаскиваете из списка, он клонирует его, так что список остается прежним (т.е. блоки не удаляются).

Есть два контейнера (в этом примере) с именами классов «dragrow1» и «dragrow2». В зависимости от того, в какую строку вы перетащите свой блок, внешний вид блока изменится. Это работает как надо. Беда в том, чтобы заставить эти блоки снова перетаскивать, либо внутри своего собственного контейнера, либо другого, и без клонирования самого себя (нужно переместить). Кстати, имя класса меняется с «.item» на «.box» после удаления из соображений стиля. Приятно, когда вы перетаскиваете цветной контейнер в контейнер, так как из-за примененного стиля css каждый блок плавает рядом друг с другом, поэтому они лежат рядом от верхнего левого угла.

Мой код jquery до сих пор выглядит так: 

$(document).ready(function(){

  $(".items").draggable({helper: 'clone'});

  $(".dragrow1").droppable({
    accept: ".items, .box",
    hoverClass: 'dragrowhover',
    tolerance: 'pointer',
    drop: function(ev, ui) {
      var dropElemId = ui.draggable.attr("id");
      var dropElemTitle = ui.draggable.attr("title");
      $(this).append('<div class="box" id="'+dropElemId+'row1">'+dropElemTitle+' - some extra box content here</div>');
      $('div.box a').click(function(){$('#'+dropElemId+'row1').remove()});
    }

  });   
  $(".dragrow2").droppable({
    accept: ".items, .box",
    hoverClass: 'dragrowhover',
    tolerance: 'pointer',
    drop: function(ev, ui) {
      var dropElemId = ui.draggable.attr("id");
      var dropElemTitle = ui.draggable.attr("title");
      $(this).append('<div class="box" id="'+dropElemId+'row2">'+dropElemTitle+' - different content here</div>');
      $('div.box a').click(function(){$('#'+dropElemId+'row2').remove()});
    }
  });
});

А пример кода контейнера выглядит так: 

<div class="dragbox-content" style="display:block" >
  <div class="dragrow1">&nbsp;</div>
  <div class="dragrow2">&nbsp;</div>
</div>

Кто-нибудь может дать мне какие-нибудь указатели?

Спасибо

Али.

1 Ответ

0 голосов
/ 20 января 2010

Я нашел другой способ, используя draggable с sortable. Вы можете увидеть отдельную тему здесь об этом:

jQuery - манипулировать опущенным элементом в сортируемом списке

Я еще не понял, как перетаскивать контейнеры, потому что это не является обязательным требованием.

Али.

...