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

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

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

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

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

45
jquery jquery-ui jquery-ui-draggable jquery-ui-droppable

4 ответов

вы можете использовать draggable в 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>
74

Производительность Идея:

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

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

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

1

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

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

1

то, что я сделал для этого, создано функцией, которую вы даете подчиненным / основным элементам, которая создает функцию bind() для мастера (я только разрешаю перетаскивание из Мастера в этом случае, вы можете обойти это, я уверен), что заставляет подчиненного следовать за ним с помощью стандартного 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');

        } 
    }

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

1