JavaScript的打印功能问题

当我点击Izleme（跨度/按钮），我来背，我不能用我的JavaScript函数就像我的div的可拖动调整大小的方法。有人可以帮助我吗？ Önizleme按钮工作是打印当我从打印屏幕回到我不能使用我的JavaScript函数像Draggable和调整大小。有什么是我的错，任何人都可以帮助我？JavaScript的打印功能问题

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.divKolon {width:50px;height:50px;padding:10px;border:3px solid #DD4B39; background-color: #E98A7E;float:left;} 
.divKolon-resizable-e{ 
    height: 50px !important; 
} 
.divUstKolon {width:50px;height:50px;padding:10px;border:3px solid #DD4B39; text-align:center;float:left;margin-right:20px;} 

.shadow(@shadow){ 
    -webkit-box-shadow:@shadow; 
    -mox-box-shadow:@shadow; 
    box-shadow:@shadow; 
} 


.label-danger{ 

    margin-left:10px; 
    margin-top:10px; 

} 

</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> 
     <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
     <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 

<script> 

var Bosluk=0; 
var SecilenItem; 
var VTBilgileri=[]; 
var YaziFont; 
var YaziBoyutu; 

function allowDrop(ev) { 
    ev.preventDefault(); 
} 

function drag(ev) { 
    ev.dataTransfer.setData("text", ev.target.id); 
    //console.log(ev.target); 
} 

function drop(ev) { 

    ev.stopPropagation() 
    var EklenecekDiv=ev.target; 
    var data = ev.dataTransfer.getData("text"); 
    //console.log(ev.target); 
    console.log($(ev.target).parent()); 


    var divim=ev.target; 

     var c = divim.children; 
     console.log(c.lenght); 
      /*if(c[2]==null) 
      { 
       EklenecekDiv=$($(ev.target).parent()); 
       EklenecekDiv.append() 
       var label1=document.getElementById(data); 

       var MyLabelAdd1=document.createElement("div"); 
       MyLabelAdd1.appendChild(document.createTextNode($(label1).html())); 
       $(MyLabelAdd1).attr("name","KolonAdi"); 
       EklenecekDiv.append(MyLabelAdd1); 
       divim.remove(); 
       label1.remove(); 
       return; 
       console.log(EklenecekDiv); 
      } 




     if(c[3]!=null) 
     { 
      c[3].remove(); 

     }*/ 




    var label=document.getElementById(data); 

    var MyLabelAdd=document.createElement("div"); 

    MyLabelAdd.appendChild(document.createTextNode($(label).html())); 
     $(MyLabelAdd).attr("name","KolonAdi"); 
     if(YaziFont!=null&&YaziBoyutu!=null){MyLabelAdd.style.fontFamily=YaziFont; } 
     if(YaziBoyutu!=null){alert(YaziBoyutu); MyLabelAdd.style.fontSize =YaziBoyutu+"px"; } 

    EklenecekDiv.appendChild(MyLabelAdd); 
    label.remove(); 
} 
function tiklandi() 
{ 

    alert("Okey"); 
} 
function Click(e){ 
    if(SecilenItem==null) 
    { 
     alert("Lütfen Alan Seçiniz"); 
     return; 
    } 

    var item=SecilenItem; 
    var div=document.getElementById("Itemler"); 
    var label=document.createElement("span"); 
    $(label).addClass("label label-danger col-xs-1"); 
    $(label).attr("id","drag"); 
    $(label).attr("draggable","true"); 
    $(label).attr("ondragstart","drag(event)"); 

    $(label).mousedown(function(e){ 
    if(e.button == 2) { 
     $(this).remove(); 
     return false; 
    } 
    return true; 
    }); 


    label.appendChild(document.createTextNode(item)); 
    div.appendChild(label); 
    //console.log($(label).html()); 


    var KolonDiv=document.createElement("div"); 
    $(KolonDiv).attr("ondrop","drop(event)") 
    $(KolonDiv).attr("ondragover","allowDrop(event)"); 
    $(KolonDiv).addClass("divKolon"); 
    KolonDiv.style.marginLeft=Bosluk+"px"; 
    $(KolonDiv).mousedown(function(e){ 
    if(e.button == 2) { 
     $(this).remove(); 
     return false; 
    } 
    return true; 
    }); 

    $(KolonDiv).resizable(); 
    $(KolonDiv).draggable(); 

    var Kolonlar=document.getElementById("Kolonlar"); 
    Kolonlar.appendChild(KolonDiv); 





}; 

function CiktiGetir(e){ 
    var KolonlarinChildren=document.getElementsByClassName("divKolon"); 
    var printContents = document.getElementById("Kolonlar"); 
    var originalContents = document.body.innerHTML; 

    printContents=printContents.innerHTML; 



    document.body.innerHTML = printContents; 

    window.print(); 

    document.body.innerHTML = originalContents; 


} 
function TabloAlanTiklandi (e){ 



    SecilenItem=$(e).text(); 
    $(e).parents(".dropdown").find('.btn').html($(e).text() ); 
    //e.remove(); 
} 

function FontLi(e) 
{ 
    YaziFont=$(e).text(); 
    $(e).parents(".dropdown").find('.btn').html($(e).text() ); 
} 

function StilDegistir(e) 
{ 

} 

function EkAlanClick(e){ 
    if($("#EkAlan").val()==null) 
    { 
     alert("Lütfen Alan Giriniz"); 
     return; 
    } 
    var h1=document.createElement("h1"); 
    var item=$("#EkAlan").val(); 
    var div=document.getElementById("Itemler"); 
    var label=document.createElement("span"); 
    $(label).addClass("label label-danger col-xs-1"); 
    $(label).attr("id","drag"); 
    $(label).attr("draggable","true"); 
    $(label).attr("ondragstart","drag(event)"); 

    $(label).mousedown(function(e){ 
    if(e.button == 2) { 
     $(this).remove(); 
     return false; 
    } 
    return true; 
    }); 


    label.appendChild(document.createTextNode(item)); 
    div.appendChild(label); 
    //console.log($(label).html()); 


    var KolonDiv=document.createElement("div"); 
    $(KolonDiv).attr("ondrop","drop(event)") 
    $(KolonDiv).attr("ondragover","allowDrop(event)"); 
    $(KolonDiv).addClass("divKolon"); 
    $(KolonDiv).mousedown(function(e){ 
    if(e.button == 2) { 
     $(this).remove(); 
     return false; 
    } 
    return true; 
    }); 

    $(KolonDiv).resizable(); 
    $(KolonDiv).draggable(); 

    var Kolonlar=document.getElementById("Kolonlar"); 
    Kolonlar.appendChild(KolonDiv); 


$("#EkAlan").val(""); 



} 

function BoslukEkle(e) 
{ 
    if($("#Aralik").val().lenght==0) 
    { 
     alert("Aralik Degeri Giriniz"); 
     return; 
    } 
    Bosluk=$("#Aralik").val(); 
    alert(Bosluk); 
    $("#Aralik").val(""); 
} 

function BoyutEkle(e) 
{ 
    if($("#YaziBoyutu").val().lenght==0) 
    { 
     alert("Boyut Degeri Giriniz"); 
     return; 
    } 
YaziBoyutu=$("#YaziBoyutu").val(); 
$("#YaziBoyutu").val(""); 

} 


</script> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>AdminLTE 2 | Calendar</title> 
    <!-- Tell the browser to be responsive to screen width --> 
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> 
    <!-- Bootstrap 3.3.6 --> 
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> 
    <!-- Font Awesome --> 

    <!-- Theme style --> 
    <link rel="stylesheet" href="dist/css/AdminLTE.min.css"> 
    <!-- AdminLTE Skins. Choose a skin from the css/skins 
     folder instead of downloading all of them to reduce the load. --> 
    <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css"> 

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
</head> 
<body class="hold-transition skin-blue sidebar-mini"> 



    <!-- Left side column. contains the logo and sidebar --> 


    <!-- Content Wrapper. Contains page content --> 

    <!-- Content Header (Page header) --> 


    <!-- Main content --> 
    <div class="divUstKolon col-xs-12" id="Itemler" style="height:50px"></div> 
    <div class=" col-xs-12" style="margin-top:20px" > 
<div class="dropdown col-xs-1" style="height:32px " > 
    <button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Alan Ekle 
    <span class="caret"></span></button> 

    <ul id="Secenekler" class="dropdown-menu"> 
     <li><a onClick="TabloAlanTiklandi(this)" href="#">Isim</a></li> 
     <li><a onClick="TabloAlanTiklandi(this)"href="#">SoyIsim</a></li> 
     <li><a onClick="TabloAlanTiklandi(this)" href="#">Adress</a></li> 
     <li><a onClick="TabloAlanTiklandi(this)" href="#">Numara</a></li> 
     <li><a onClick="TabloAlanTiklandi(this)" href="#">Yaş</a></li> 
     <li><a onClick="TabloAlanTiklandi(this)" href="#">Tanıdık 1</a></li> 
    </ul> 
    </div> 
<label class="btn btn-default col-xs-1" style="margin-left :10px ; height:32px " id="Ekle" onClick="Click(this)"> Ekle </label> 

    <div class="col-xs-1"></div> 
     <input style="margin-left :10px ; height:32px " type="text" class="col-xs-1" id="EkAlan"> 

     <label style="margin-left :10px ; height:32px" class="btn btn-default col-xs-1" id="Ekle" onClick="EkAlanClick(this)"> Ek Alan Ekle </label> 

     <div class="col-xs-4" ></div> 
    <label class="btn btn-danger col-xs-1" id="CiktiGetir" style="margin-right :10px" onClick="CiktiGetir(this)" >Ön İzleme</label> 
    <label class="btn btn-primary col-xs-1" id="CiktiGetir" style="margin-right :10px" onClick="CiktiGetir(this)" >Ana Sayfa</label> 
</div> 
<div class="col-xs-12" style="margin-top:10px"> 

<input style="margin-left :10px ; height:32px " type="text" class="col-xs-1" id="YaziBoyutu" placeholder="Yazı Boyutu"> 

<label style="margin-left :10px ; height:32px" class="btn btn-default col-xs-1" onClick="BoyutEkle(this)"> Değiştir</label> 
<div class="col-xs-1" ></div> 
<div class="dropdown col-xs-2" style="height:32px " > 
    <button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Yazı Font 
    <span class="caret"></span></button> 

    <ul id="Fontlar" class="dropdown-menu"> 
     <li><a onClick="FontLi(this)" href="#">Georgia</a></li> 
     <li><a onClick="FontLi(this)"href="#">Palatino Linotype</a></li> 
     <li><a onClick="FontLi(this)" href="#">Book Antiqua</a></li> 
     <li><a onClick="FontLi(this)" href="#">Times New Roman</a></li> 
     <li><a onClick="FontLi(this)" href="#">Arial</a></li> 
     <li><a onClick="FontLi(this)" href="#">Helvetica</a></li> 
     <li><a onClick="FontLi(this)" href="#">Arial Black</a></li> 
     <li><a onClick="FontLi(this)" href="#">Impact</a></li> 
     <li><a onClick="FontLi(this)" href="#">Lucida Sans Unicode</a></li> 
     <li><a onClick="FontLi(this)" href="#">Tahoma</a></li> 
     <li><a onClick="FontLi(this)" href="#">Verdana</a></li> 
     <li><a onClick="FontLi(this)" href="#">Courier New</a></li> 
     <li><a onClick="FontLi(this)" href="#">Lucida Console</a></li> 
    </ul> 
    </div> 

<label style="margin-left :10px ; height:32px" class="btn btn-default col-xs-1" id="Ekle" onClick="StilDegistir(this)"> Yazi Stil Değiştir</label> 
<div class="col-xs-1" ></div> 

</div> 


<div class="col-xs-12" id="Kolonlar" style="margin-top :10px"> </div> 






    <!-- /.content --> 

    <!-- /.content-wrapper --> 



    <!-- Control Sidebar --> 

    <!-- /.control-sidebar --> 
    <!-- Add the sidebar's background. This div must be placed 
     immediately after the control sidebar --> 
    <div class="control-sidebar-bg"></div> 

<!-- ./wrapper --> 

<!-- jQuery 2.2.3 --> 
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script> 
<!-- Bootstrap 3.3.6 --> 
<script src="bootstrap/js/bootstrap.min.js"></script> 
<!-- jQuery UI 1.11.4 --> 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
<!-- Slimscroll --> 
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script> 
<!-- FastClick --> 
<script src="plugins/fastclick/fastclick.js"></script> 
<!-- AdminLTE App --> 
<script src="dist/js/app.min.js"></script> 
<!-- AdminLTE for demo purposes --> 
<script src="dist/js/demo.js"></script> 
<!-- fullCalendar 2.2.5 --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script> 
<script src="plugins/fullcalendar/fullcalendar.min.js"></script> 
<!-- Page specific script --> 

</body> 
</html>

来源

2016-08-12 Jack Marquies

要更换的身体HTML

document.body.innerHTML = printContents; 
window.print(); 
document.body.innerHTML = originalContents;

所以，你需要reatach的事件。

试试“on”jquery方法。喜欢的东西

$(document).on('click', '#CiktiGetir', function() { CiktiGetir(); });

来源

2016-08-12 17:58:29

它不再工作相同的问题，当我回页面我不能使用我的javascript功能.. –

我的代码只是一个例子。你将不得不适应你的代码。您需要在替换主体内容后重新处理事件。你不想这样做，你可以刷新整个页面。功能CiktiGetir（E）{ VAR KolonlarinChildren = document.getElementsByClassName（ “divKolon”）; var printContents = document.getElementById（“Kolonlar”）; printContents = printContents.innerHTML; document.body.innerHTML = printContents; window.print（）; location.reload（）; } –

这不是一个最佳的解决方案，但你可以尝试用这种替代CiktiGetir功能：

function CiktiGetir(e){ 
    var htmlElement = document.querySelector("html"); 
    var printContents = document.getElementById("Kolonlar"); 

    // Make body invisible, append new element to HTML 
    document.body.style.display = "none"; 
    htmlElement.appendChild(printContents); 

    window.print(); 

    // Make body visible again, remove the added element 
    document.body.style.display = "initial"; 
    htmlElement.removeChild(printContents); 
}

更换HTML内容打破了JS事件和动态内容。

来源

2016-08-12 18:10:52 smddzcy

我在论文中获得了非常多的空间。这是坏主意:( –

改变了我的代码，请尝试用这个 – smddzcy

我得到白屏现在：。/只白加什么我的网页，当我回来的打印屏幕上 –

我的代码只是一个例子。你将不得不适应你的代码。

您需要在替换主体内容后重新处理事件。

如果你不想要这个，你就可以刷新整个页面。

function CiktiGetir(e){ 
    var KolonlarinChildren=document.getElementsByClassName("divKolon"); 
    var printContents = document.getElementById("Kolonlar"); 
    printContents=printContents.innerHTML; 
    document.body.innerHTML = printContents; 
    window.print(); 
    location.reload(); 
}

来源

2016-08-12 18:20:04

我不需要这个。我失去了我的div，如果我重新加载。 –

JavaScript的打印功能问题

回答

相关问题