0

Quiero detectar el arrastre de buttons, para que despues, de pendiendo de que buttons se hayan arrastrado, fusionarlos copiando sus textos y metiendolos en un úinco con rowspan y colspan.

<table>
  <tr>
    <td>
      <button>1</button>
    </td>
    <td>
      <button>2</button>
    </td>
  </tr>
  <tr>
    <td>
      <button>3</button>
    </td>
    <td>
      <button>4</button>
    </td>
  </tr>
</table>

Espero haberme explicado bien, si tenéis preguntas puedo responderlas en los comentarios.

1 respuesta 1

0

Si entiendo bien tu problema, lo podrías hacer de la siguiente manera, usando jQuery:

<!-- Agregamos Jquery para facilidad en el DOM.- -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- En este script detectamos los clicks en los botones y les colocamos una clase si corresponde, también usamos append para colocar la información de esos botones en un td.- -->
<script>
$(document).ready(function(){

  $('button.apretable').click(function(){

    if($(this).hasClass('active')){
        $(this).removeClass('active');
    }else{
        $(this).addClass('active');
    }

    $('#resultado').html('');

    $('button.active').each(function(){

        $('#resultado').append($(this).text());

    });

  });

});
</script>

<!-- Le damos un poco de estilo a los botones cuando están seleccionados para poder distinguirlos.- -->
<style>
  .apretable.active{
    background: pink;
  }  
</style>

<!-- El HTML -->
<table>
  <tr>
    <td>
      <button class="apretable">1</button>
    </td>
    <td>
      <button class="apretable">2</button>
    </td>
  </tr>
  <tr>
    <td>
      <button class="apretable">3</button>
    </td>
    <td>
      <button class="apretable">4</button>
    </td>
  </tr>
  <tr>
    <td id="resultado" colspan=2>

    </td>
  </tr>
</table>

Dime si tienes alguna duda.

5
  • No quiero que tengas que pulsar, más bien que al arrastrar te detecte... Lo siento por las molestias.
    – Clipi
    Commented el 2 mar. 2019 a las 13:29
  • ¿Quieres poder arrastrar los botones al td#resultado? Commented el 2 mar. 2019 a las 13:30
  • no, quiero arrastrar un button a otro button, y que entonces se junten los button en la misma table con un <td> con los atributos colspan y rowspan
    – Clipi
    Commented el 2 mar. 2019 a las 13:34
  • 1
    ¡Entiendo! Considera editar la pregunta y colocar "Arrastrar", hay un mundo de diferencia entre Seleccionar y Arrastrar en Javascript. Te dejo un link que te puede servir: jqueryui.com/draggable/#snap-to, si más tarde sigues con el problema te hago un ejemplo. Commented el 2 mar. 2019 a las 13:42
  • Gracias por tu comentario, pero ahora necesito saber cuando hay dos buttons en el mismo sitio para saber cuanto valor ponerle al rowspan
    – Clipi
    Commented el 2 mar. 2019 a las 13:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.