jQuery UI:打印丢弃的div

时间:2017-09-28 15:56:51

标签: jquery jquery-ui

在此website我试图打印一些可放置的元素。

如您所见,我创建了一个拖放计划,可以从左到右拖放元素。

通过JS我定义了,那些可丢弃的div在被删除时会假设额外的类,如“.dragged1”“。dragged2”等......

当我按下打印时,我无法显示那些掉落的元素。

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);
                }
});

在CSS中我定义了这个:

@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;
    }
}

我写错了什么?

0 个答案:

没有答案