3

Ocurre lo siguiente, El elemento Something puede ser arrastrado y soltado, pero si lo mueves de la zonaelements a printable e intentas imprimir cliqueando en Print this element en elements y ves la ventana de vista previa, verás que Something no es visible. ¿Cómo puedo hacer funcionar esto?

Imagen:

CodePen Example

Código:

$('#box1').draggable();

$('#print1').click(function() {
  $('.elements').print({
    noPrintSelector: 'a'
  })
});
$('#print2').click(function() {
  $('.printable').print({
    noPrintSelector: 'a'
  })
});
.elements, .printable {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  float: left;
  margin: 20px;
}
.elements span, .printable span {
  margin: 5px;
}
.printable a {
  position: static;
}
.box {
  border: 1px solid black;
  width: 100px;
  text-align: center;
  background-color: red;
  color: white;
  font-weight: bolder;
}
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="http://laravel2-maramal1.c9users.io/assets/js/jQuery.print.js"></script>

<!-- HTML -->
<div class="elements">
  <span>elements</span>
  <a href="#" id="print1">Print this element</a>
  <div class="box" id="box1">
    <p>Something</p>
  </div>
</div>

<div class="printable">
  <span>printable</span>
  <a href="#" id="print2">Print this element</a>
</div>

1 respuesta 1

0

Esta respuesta es más una idea que te puede guiar, que una solución final.

La idea básica es desplazar el elemento (en el DOM) al momento de hacer el "drop" en la otra caja. El asunto es que mientras los elementos contenedores no sean "droppable", va a ser un poco complicada la tarea.

Después de activar el widget droppable para los dos contenedores, utilizamos los métodos out para almacenar la posición del contenedor actual, y luego al momento del método drop, detectamos si es un nuevo contenedor o no, y de serlo, calculamos la posición (para el ejemplo solo calculo el eje x) que debe tener en el nuevo contenedor y "transferimos" el elemento al nuevo contenedor.

// ... resto del código js

var containerLeft, containerTop, newContainerLeft, newContainerTop;

$( ".printable, .elements" ).droppable({
    out: function(event, ui) {
      var target = $(event.target);
      containerLeft = target.position().left;
      containerTop = target.position().top;
    },
    drop: function( event, ui ) {
      var target = $(event.target);
      if (newContainerLeft != target.position().left || newContainerTop != target.position().top) {
        newContainerLeft = target.position().left;
        newContainerTop = target.position().top;       
        var newElementLeft = containerLeft - newContainerLeft;
        ui.draggable.appendTo(target).css('left', ui.position.left + newElementLeft);      
      }
    }
});

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.