группировка перетаскиваемых объектов с помощью jquery-ui draggable - PullRequest
Новая
       80

группировка перетаскиваемых объектов с помощью jquery-ui draggable

47 голосов
/ 27 апреля 2009

Я хочу использовать jquery draggable / droppable, чтобы позволить пользователю выбрать группу объектов (каждый из них имеет флажок в углу), а затем перетащить все выбранные объекты в группу ...

Я не могу понять, как это сделать, ха-ха.

Вот то, что, я думаю, приведет к пригодному для использования решению: для каждого перетаскиваемого объекта используйте событие start () и каким-то образом захватите все остальные выбранные объекты и добавьте их в выборку

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

Ответы [ 4 ]

76 голосов
/ 02 мая 2009

Вы можете использовать опцию перетаскивания helper для перетаскивания групп элементов.

Например, если ваши перетаскиваемые блоки имеют флажки, вы можете вернуть выбранные элементы из вспомогательной функции следующим образом: 

$('#dragSource li').draggable({
  helper: function(){
    var selected = $('#dragSource input:checked').parents('li');
    if (selected.length === 0) {
      selected = $(this);
    }
    var container = $('<div/>').attr('id', 'draggingContainer');
    container.append(selected.clone());
    return container; 
  }
});

Демо

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

$(function() {

  $('#dragSource li').draggable({
    helper: function() {
      var selected = $('#dragSource input:checked').parents('li');
      if (selected.length === 0) {
        selected = $(this);
      }
      var container = $('<div/>').attr('id', 'draggingContainer');
      container.append(selected.clone());
      return container;
    }
  });

  $('#dropTarget').droppable({
    tolerance: 'pointer',
    drop: function(event, ui) {
      $(this).append(ui.helper.children());
    }
  });

  $('#selectAll').click(function() {
    $('#dragSource input').prop('checked', true);
    return false;
  });

  $('#selectNone').click(function() {
    $('#dragSource input').prop('checked', false);
    return false;
  });

  $('#selectInvert').click(function() {
    $('#dragSource input').each(function() {
      var $this = $(this);
      if ($this.prop('checked')) {
        $this.prop('checked', false);
      } else {
        $this.prop('checked', true);
      }
    });
    return false;
  });
});
body {
  font-family: sans-serif;
  overflow-x: hidden;
}
div {
  margin: 5px;
  padding: 0;
}
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
  padding: 0;
  margin: 0;
  float: left;
  white-space: nowrap;
}
#selectActions span,
#selectActions li {
  float: left;
  padding: 5px;
}
.droppableContainer {
  width: 48%;
  float: left;
  min-height: 200px
}
.droppableContainer li {
  height: 90px;
  width: 110px;
  margin: 2px;
  background-color: white;
  padding-bottom: 4px;
}
.droppableContainer img {
  width: 90px;
  max-height: 90px;
  max-width: 90px;
  width: 90px;
  vertical-align: middle;
}
.droppableContainer input {
  height: 90px;
  vertical-align: middle;
}
#draggingContainer {
  width: 48%;
}
#draggingContainer input {
  visibility: hidden;
}
#dropTarget {
  border: 3px dashed grey;
}
#dropTarget input {
  visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div id="selectActions">
  <span>Select:</span>
  <ul>
    <li><a id="selectAll" href="#">all</a>
    </li>
    <li><a id="selectNone" href="#">none</a>
    </li>
    <li><a id="selectInvert" href="#">invert</a>
    </li>
  </ul>
</div>
<div style="clear:left;">
  <div id="dragSource" class="droppableContainer">
    <ul>
      <li>
        <img src="http://imgs.xkcd.com/comics/drapes.png" /><input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/misusing_slang.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/donner.jpg" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/a_new_captcha_approach.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/bug.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/open_source.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/tag_combination.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/a_simple_plan.jpg" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/it_might_be_cool.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/hedgeclipper.jpg" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/pep_talk.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/regular_expressions.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/pwned.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/post_office_showdown.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/im_an_idiot.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/pointers.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/chess_photo.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/50_ways.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/e_to_the_pi_times_i.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/self-reference.jpg" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/starwatching.png" />
        <input type="checkbox" />
      </li>
    </ul>
  </div>

  <div id="dropTarget" class="droppableContainer">
  </div>
</div>
1 голос
/ 27 мая 2010

Для этого я создал функцию, которой вы даете элементы slave / master, которая создает функцию bind () для master (в этом случае я допускаю перетаскивание из master, я могу обойти это, я уверен), что заставляет раб следовать за ним, используя стандартную jQuery css. 

    function overlap(slave,master) {
        $('a#groupTheseBlocks').click(function(){
            master.bind('drag', groupBlocks);
            slave.draggable('disable');

            // remember where the slave is in relation to the master
            sLeftRef = (slave.offset().left - master.offset().left);
            sTopRef = (slave.offset().top - master.offset().top);
        });


        function groupBlocks() {
            var left = master.offset().left;
            var top = master.offset().top;

            slave.draggable('disable');
            slave.css('left', (left + sLeftRef) + 'px');
            slave.css('top', (top + sTopRef) + 'px');

        } 
    }

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

1 голос
/ 28 апреля 2009

Это именно то, что я пытаюсь сделать. Пока что я не добился успеха, но я обнаружил, этот парень сделал это очень сложным способом. Вы могли бы проверить это, может быть, вы могли бы сделать что-то с этим.

Это должно быть функцией перетаскивания. Я надеюсь, что они реализуют это раньше, чем позже

1 голос
/ 27 апреля 2009

Идея исполнения:

Сделать невидимым «групповой объект». Когда элементы отмечены, сделайте их дочерними по отношению к объекту группы, если они не выбраны, установите их обратно в качестве дочерних элементов тела документа или статического родителя или чего-либо еще. Вам нужно будет перевести положение объектов, чтобы они не прыгали, а также прикреплять / отсоединять ваши обработчики событий мыши к дочерним элементам группы по мере их добавления / удаления.

Когда вы получаете событие мыши вверх / вниз для любого из дочерних элементов, вы фактически перемещаете этот групповой объект.

Это должно сделать его в целом проще.

...