Question

当我点击ÖnIzleme（跨度/按钮）时，我回来了，我不能在我的div上使用我的JavaScript函数Like Draggable Resize方法。有人可以帮帮我吗？ Önizleme按钮工作是打印当我从打印屏幕回来时，我无法使用我的JavaScript函数Like Draggable并调整大小。我有什么责任可以帮助我？

<!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>

Answer 1

这不是最佳解决方案，但您可以尝试用此替换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事件和动态内容。

Answer 2

您正在替换正文HTML

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

所以你需要重新安排这些事件。

尝试使用“on”jquery方法。像

这样的东西

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

Answer 3

我的代码只是一个例子。您必须根据代码进行调整。

您需要在替换正文内容后重新接收事件。

如果您不想这样做，可以刷新整个页面。

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

JavaScript打印功能问题

3 个答案: