0

On this website I am trying to print some droppable elements.

As you can see I created a drag and drop plan where is possible to drag and drop elements from left to right.

Via JS I defined that, those droppable divs, when dropped, assumes extra classes like ".dragged1" ".dragged2" etc...

It happens that when I press print I can't display those dropped elements.

JS:

$("#frame").droppable({
            drop: function(ev, ui) {
                if (ui.helper.attr('id').search(/drag[0-9]/) != -1){
                    counter++;
                    var element=$(ui.draggable).clone();
                    element.addClass("tempclass");
                    $(this).append(element);
                    $(".tempclass").attr("id","clonediv"+counter);
                    $("#clonediv"+counter).removeClass("tempclass");

                    //Get the dynamically item id
                    draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
                    itemDragged = "dragged" + RegExp.$1
                    console.log(itemDragged)

                    $("#clonediv"+counter).addClass(itemDragged);
                }
});

In CSS I defined this:

@media print {
    #options{
        display: none;
    }
#frame {
   content:url("../images/grundrisse_1.png");
     float: none;
     margin: 0 auto;
  }
    .dragged1 {
        display: inline;
        background-image: url("../images/doppelbett-delete.png");
        width:100px;
        height:100px;
    }
    .dragged2 {
        display: inline;
        background-image: url("../images/einzelbett-delete.png");
        width:100px;
        height:100px;
    }
    .dragged3 {
        display: inline;
        background-image: url("../images/esstisch-delete.png");
        width:100px;
        height:100px;
    }
    .dragged4 {
        display: inline;
        background-image: url("../images/schreibtisch-delete.png");
        width:100px;
        height:100px;
    }
    .dragged5 {
        display: inline;
        background-image: url("../images/schrenke-delete.png");
        width:100px;
        height:100px;
    }
    .dragged6 {
        display: inline;
        background-image: url("../images/sessel_einzeln-delete.png");
        width:100px;
        height:100px;
    }
    .dragged7 {
        display: inline;
        background-image: url("../images/sofaecke-delete.png");
        width:100px;
        height:100px;
    }
    .dragged8{
        display: inline;
        background-image: url("../images/clubtisch-delete.png");
        width:100px;
        height:100px;
    }
}

What am I writing wrong?

V.Pepe
  • 3
  • 3
  • I think the print view loads the site fresh, so your dynamic editing is gone. you could made a custom print function. You could create an iframe on the fly and print it after (see here https://stackoverflow.com/questions/9616426/javascript-print-iframe-contents-only) or you could generate a dynamic url for the user like `'data:text/html;charset=utf-8,'+encodeURIComponent($('#frame').html())` – sofl Sep 28 '17 at 16:15
  • I would advise creating a dynamically created image based on the resulting elements. This would require a print button that would pop open a new tab/window and the content be an SVG or a JPEG that contains the item to be printed/downloaded. – Twisty Sep 28 '17 at 18:14
  • Not a fan of your code. Done some testing (and adjustments) and will keep working on it. Dynamic content, even in it's own window, is not being printed. Test are: https://jsfiddle.net/Twisty/9ngzgLgp/13/ – Twisty Sep 28 '17 at 22:43
  • Also just found this: http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/ – Twisty Sep 28 '17 at 22:53
  • @Twisty Hi, thanks for the adjustments on my code. Do you have an idea on how to print those elements? – V.Pepe Sep 29 '17 at 06:43

0 Answers0