Tengo un diseño arrastrable y soltable. Estoy creando un objeto arrastrable cuando lo agrego desde una selección de búsqueda de escritura anticipada. Sin embargo, tengo algunos problemas de "colocación". El tamaño del objeto que se puede arrastrar es mucho mayor que el contenedor en el que se debe colocar. Esto lleva a algunos problemas de caída.

Quiero cambiar el tamaño del elemento a la mitad de su tamaño actual al arrastrar el inicio. ¿Cómo hago esto? El problema no está presente en el violín a menos que width de .semester esté configurado en torno a 30%.

Aquí está la JSFiddle

Editar:

Después de haber implementado la solución @ user619081, quería que esto sucediera solo si el objeto era muy grande. Hice una variable global var tempWidth y actualicé el código a lo siguiente:

start: function(event, ui) {
    if(tempWidth < $(this).width()){
        $(this).addClass("moveable");
    }
    tempWidth = $(this).width();
},
stop: function(event, ui) {
    $(this).removeClass("moveable");
}
0
Zeliax 12 may. 2016 a las 13:09

3 respuestas

La mejor respuesta

Debe conectar los eventos de inicio de arrastre y detención de arrastre del widget arrastrable.

Lea más sobre ellos aquí:

Ahora que sabe cómo usarlos, puede hacer algo como esto:

$(".courseBox").draggable({
  revert: "invalid",
  containment: "document",
  cursor: "move",
  start: function(event, ui) {
    $(ui.helper).css('width', "50%");
  },
  stop: function(event, ui) {
    $(ui.helper).css('width', "100%");
  }
});

Tenga en cuenta que ui.helper contiene la referencia al elemento que está arrastrando, por lo que lo ve en el código.

Aquí hay un violín de trabajo también.

8
Peter 12 may. 2016 a las 10:23

Deberías buscar los eventos ondragstart y ondragstop. Busque ev.originalEvent.dataTransfer si necesita pasar información sobre el estado original del elemento DOM, como el ancho original u otra cosa.

$(".courseBox").on('dragstart', function(ev) {
  $(this).css('width', '50%');
});

$(".courseBox").on('dragstop', function(ev) {
  $(this).css('width', '100%');
});
2
Tadas Paplauskas 12 may. 2016 a las 10:28
I have updated your fiddle just check it.
It is working with targeted width size

https://jsfiddle.net/8g2oqp0h/37/

1
Bhavi 12 may. 2016 a las 11:21