在此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;
}
}
我写错了什么?