Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > выделение и перемещение объектов jquery


Автор: Raily 29.6.2009, 15:07
У меня есть следующий код: 
Код

<body>
<!-- css и javascript-коды специально размещены непосредственно на странице. -->

<div class="elmt"><img id="1" src="droppable-klubnika.gif" alt="Клубника" /></div>
<div class="elmt"><img id="2" src="droppable-banana.gif" alt="Бананы" /></div>
<div class="elmt"><img id="3" src="droppable-perec.gif" alt="Перец" /></div>

<div id="slct"><span>Корзина</span><input id="buy" type="button" value="Удалить всё!"></div>

<script type="text/javascript">
$(document).ready(function(){

// --------------- DRAGGABLES & DROPPABLES -------------------
$("div.elmt").draggable({
    helper: 'clone',
    opacity: 0.5
});

$("#slct").droppable({
  accept: ".elmt",
  activeClass: 'droppable-active',
  hoverClass: 'droppable-hover',
  drop: function(ev, ui) {
    var code = $(ui.draggable.element).find("img").attr("id");
    if($(this).find("div[@id='"+ code +"']").html()==null) {
      var name = $(ui.draggable.element).find("img").attr("alt");
      $(this).append("<div class='slct' id='" + code + "'>" + name + "<img src='droppable-delete.gif' class='delete' alt='Удалить'></div>");
    }
    // *******************************
    $(".delete").click(function () {
      $(this).parent().remove();
    });

  }
});

// --------------- DRAGGABLES & DROPPABLES -------------------
});
</script>
</body>


Он позволяет при помощи jquery перетаскивать объекты по одному (код я взяла тут: http://www.linkexchanger.su/2008/21.html)

У меня такой вопрос - а как можно сделать так, чтобы я выделяла мышкой несколько объектов и они точно так же перетаскивались?

Автор: IDVsbruck 30.6.2009, 00:37
Да, можно. Главный вопрос - как осуществить механизм выделения нескольких элементов. Далее просто - допустим, мы выделили несколько элементов, и назначаем им стиль selected, а далее - так же - $("div.elmt.selected").{...}
Вопрос с выделением, думаю, решаемый - можно пробовать анализировать события мыши в контейнере, где находятся элементы: нажание мыши в контейнере, но не на элементах, рассматривается как начало выделения элементов, при движении можно показывать рамку и сразу определять попал ли в выделение элемент, а можно при отпускании мыши это делать. При попадании элемента в выделение назначаем класс selected, при выходе из зоны убираем класс.

Возможно, сырой алгоритм, но я бы пошел именно по такому пути. Благо, jQuery предоставляет много возможностей для подобных манипуляций.

Автор: Raily 30.6.2009, 08:45
Спасибо большое!!! буду пробовать  smile 

Автор: Raily 30.6.2009, 11:41
что-то зашла в тупик - не могу понять, как сказать Jquery, что несколько объектов должны одновременно перетаскиваться? выделить их выделила, но перетаскиваются они по одному всё равно

Автор: IDVsbruck 30.6.2009, 12:26
Сам не использовал drag&drop в js (и в jQuery), но дока вроде говорит, что можно перетаскивать пачкой.
А что, селектор $("div.elmt.selected") не дает все элементы, у которых классы elmt и selected?

Автор: Raily 30.6.2009, 13:41
Цитата(IDVsbruck @ 30.6.2009,  12:26)
Сам не использовал drag&drop в js (и в jQuery), но дока вроде говорит, что можно перетаскивать пачкой.
А что, селектор $("div.elmt.selected") не дает все элементы, у которых классы elmt и selected?

Не, не помогает((( он просто перетаскивает только те элементы, у которых есть и elmt и selected, но по очереди, а не все сразу

Автор: IDVsbruck 30.6.2009, 21:15
Ну, тогда можно реализовать слегка гиморный, но зато "железобетонный" способ: выделяем и при драге создаем контейнер с абсолютныи позиционированием, по размеру как обрамляющий выделенные элементы прямоугольник, куда помещаем дубликаты выделенных элементов (сами элементы прячем). Делаем драг созданному контейнеру, который содержит требуемые элементы ... и т.д., надеюсь, идея понятна.

Автор: ksnk 30.6.2009, 22:59
Разумнее, imho, воспользоваться методами этого самого draggable.
Код

$('.selector').draggable({
   start: function(event, ui) { ... }
   drag: function(event, ui) { ... }
   stop:...
});

По старту нужно запомнить все координаты всех отмеченных объектов.
По драгу - переместить все отмеченные объекты, кроме себя самого на нужное смещение, относительно собственных стартовых координат.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)