1

このHTMLファイルでドラッグ可能およびサイズ変更可能なDIVを使用しています。ユーザーがDIVタグをメインの親DIVタグの目的の場所に配置する場所。ここで、このメインDIVタグを印刷したいのですが、問題は、このメインDIVを印刷するために使用しているコードが、ユーザーがDIVを配置した方法とは異なり、順番に印刷されていることです。また、メインのDIV背景画像を使用しません。これがコードです。

JavaScriptとCSS

<link rel="stylesheet" type="text/css" href="byrei-dyndiv_0.5.css">
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" > </script> 
<script type="text/javascript" src="byrei-dyndiv_1.0rc1.js"></script>   
<script language="javascript" type="text/javascript"> 
function change(boxid,divtoaffect) { 
content = document.getElementById("" + boxid + "").value.replace(/\n/g, '<br>'); 
document.getElementById(divtoaffect).innerHTML = content; 
} 
function select1() {
test=document.getElementById("changeMe");
test.style.backgroundImage="url('Sunset.jpg')";
}

function select2() {
test=document.getElementById("changeMe");
test.style.backgroundImage="url('Blue hills.jpg')";
}


    function PrintElem(elem)
    {
        Popup($(elem).text());
    }

    function Popup(data) 
    {
        var mywindow = window.open('', 'my div', 'height=400,width=600');
        mywindow.document.write('<html><head><title>my div</title>');
        /*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
        mywindow.document.write('</head><body >');
        mywindow.document.write(data);
        mywindow.document.write('</body></html>');
        mywindow.document.close();
        mywindow.print();
        return true;
    }  

//  Print DIV

function printContent(id){
                            str=document.getElementById(id).innerHTML
                            newwin=window.open('','printwin','left=100,top=100,width=400,height=400')
                            newwin.document.write('<HTML>\n<HEAD>\n')
                            newwin.document.write('<TITLE>Print Page</TITLE>\n')
                            newwin.document.write('<script>\n')
                            newwin.document.write('function chkstate(){\n')
                            newwin.document.write('if(document.readyState=="complete"){\n')
                            newwin.document.write('window.close()\n')
                            newwin.document.write('}\n')
                            newwin.document.write('else{\n')
                            newwin.document.write('setTimeout("chkstate()",2000)\n')
                            newwin.document.write('}\n')
                            newwin.document.write('}\n')
                            newwin.document.write('function print_win(){\n')
                            newwin.document.write('window.print();\n')
                            newwin.document.write('chkstate();\n')
                            newwin.document.write('}\n')
                            newwin.document.write('<\/script>\n')
                            newwin.document.write('</HEAD>\n')
                            newwin.document.write('<BODY onload="print_win()">\n')
                            newwin.document.write(str)
                            newwin.document.write('</BODY>\n')
                            newwin.document.write('</HTML>\n')
                            newwin.document.close()
                        }

</script> 
</head> 
<body> 
<style type="text/css">
#output1,#output2 ,#output3 {
width: 300px;
word-wrap: break-word;
border: solid 1px black;
}



</style>

HTML

<div style="width:650px;height:300px;" id="changeMe" >

        <table cellpadding="5" cellspacing="0" width="100%" style="margin:auto;">
            <tr>
                <td><div class="dynDiv_moveDiv" id="output1" style="font-weight:bold;height:20px;margin-top:40px;">
                    <div class="dynDiv_resizeDiv_tl"></div>
                     <div class="dynDiv_resizeDiv_tr"></div>
                     <div class="dynDiv_resizeDiv_bl"></div>
                     <div class="dynDiv_resizeDiv_br"></div>
                    </div>
                    </td>
            </tr>
            <tr>
                <td><div class="dynDiv_moveDiv" id="output2" style="height:40px;margin-top:30px;">
                    <div class="dynDiv_resizeDiv_tl"></div>
                     <div class="dynDiv_resizeDiv_tr"></div>
                     <div class="dynDiv_resizeDiv_bl"></div>
                     <div class="dynDiv_resizeDiv_br"></div>
                    </div></td>
            </tr>   
            <tr>
                <td><div class="dynDiv_moveDiv" id="output3" style="height:50px;margin-top:40px;">
                    <div class="dynDiv_resizeDiv_tl"></div>
                     <div class="dynDiv_resizeDiv_tr"></div>
                     <div class="dynDiv_resizeDiv_bl"></div>
                     <div class="dynDiv_resizeDiv_br"></div>
                    </div></td>
            </tr>   
        </table>
    </div>
<tr>
    <td align="center"><input type="button" value="Print Div" onClick="printContent('changeMe')" />
    </td>
</tr>

これがより明確になる画像です ここに画像の説明を入力してください ここに画像の説明を入力してください

4

1 に答える 1