examples - agrupar objetos arrastrables con jquery-ui arrastrable
jquery draggable sortable (4)
Quiero usar jquery que se puede arrastrar / soltar para permitir que el usuario seleccione un grupo de objetos (cada uno tiene una casilla de verificación en la esquina) y luego arrastrar todos los objetos seleccionados como un grupo ...
No me puedo imaginar cómo hacerlo, jaja.
Esto es lo que estoy pensando que conducirá a una solución utilizable, en cada objeto arrastrable, use el evento start () y de alguna manera tome todos los otros objetos seleccionados y agréguelos a la selección
También estaba considerando simplemente hacer que el objeto arrastrado se vea como un grupo de objetos (son imágenes, tal vez un montón de fotos) por motivos de rendimiento. Creo que el uso de la funcionalidad de arrastre podría fallar si arrastras varias docenas de objetos a la vez, ¿te parece una idea mejor?
Esto es exactamente lo que trato de hacer. Hasta ahora no he tenido éxito, pero he descubierto que este tipo lo hizo de una manera muy complicada. podrías echarle un vistazo quizás podrías hacer algo con eso.
Esta debería ser una característica de arrastrable. Espero que lo implementen más temprano que tarde
Idea de rendimiento:
Haz un ''objeto de grupo'' invisible. Cuando los elementos están marcados, hágalos secundarios del objeto de grupo, cuando no estén seleccionados, configúrelos nuevamente como elementos secundarios del cuerpo del documento, o elemento primario estático o lo que sea. Tendrás que traducir la posición de los objetos para asegurarte de que no salten, también adjuntar / separar los manejadores de eventos de tu mouse a los elementos secundarios del grupo cuando los agregas o eliminas.
Cuando obtienes un evento de ratón hacia abajo / arriba en cualquiera de los niños, lo que moverás es en realidad ese objeto de grupo.
Esto debería hacerlo más simple en general.
Lo que he hecho para esto es crear una función a la que le das los elementos esclavos / maestros, que crea una función bind () para el maestro (solo estoy permitiendo un arrastre del maestro en este caso, puedes evitarlo esto estoy seguro), lo que hace que el esclavo lo siga usando jQuery css estándar.
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'');
}
}
Supongo que publicaré más sobre esto una vez que tengo un ejemplo de trabajo. Tal como está, esto está funcionando para mí. Lo que falta es una forma de llamar la superposición (esclavo, maestro) con los elementos que desea agrupar. Estoy haciendo esto de una manera muy específica. Puedes hacer una manera inteligente de hacerlo, estoy seguro.
Puede usar la opción de helper del dispositivo arrastrable para arrastrar grupos de elementos.
Por ejemplo, si sus juegos de arrastre tienen casillas de verificación, puede devolver los elementos seleccionados de la función auxiliar de esta manera:
$(''#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;
}
});
Manifestación
He configurado una demostración con imágenes que se pueden arrastrar con casillas de verificación y un diseño algo fluido. Haga clic en "Ejecutar fragmento de código" en la parte inferior para ver el resultado:
$(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>