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
    el 2 mar. 2019 a las 13:29
  • ¿Quieres poder arrastrar los botones al td#resultado? 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
    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. 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
    el 2 mar. 2019 a las 13:46

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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