JS 页面列表自由拖动功能。 IE内核下兼容。。不兼容谷歌。。

<%@page import="java.net.URLDecoder"%>

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%@ taglib prefix="s" uri="/struts-tags"%>

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<%@ taglib tagdir="/WEB-INF/tags" prefix="tags"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>图片列表</title>

    <META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

<SCRIPT>          

  //  var hkey_root,hkey_path,hkey_key;

  //  hkey_root="HKEY_CURRENT_USER";  

 //  hkey_path="\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";

  //设置网页打印的页眉页脚为空   

 // function   pagesetup_null()   

 // {   

  //    try{   

  //        var RegWsh=new ActiveXObject("WScript.Shell");

  //        hkey_key="header";     

  //        RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"");

 //         hkey_key="footer";

  //        RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,""); 

 //     }catch(e){}   

//

//用于设置打印参数

function printBase() {

    document.print1.factory.printing.header="";  //页眉

document.print1.factory.printing.footer="";//页脚

document.print1.factory.printing.portrait=true; //true为纵向打印,false为横向打印

document.print1.factory.printing.leftMargin=0.5;

document.print1.factory.printing.topMargin=1.5;

document.print1.factory.printing.rightMargin=0.5;

document.print1.factory.printing.bottomMargin=1.5;

///factory.printing.SetMarginMeasure(1);

}



//用于调用设置打印参数的方法和显示预览界面

function printReport(){

        document.print1.setData();

        printBase();

        document.all("button").style.display = "none";//隐藏按钮

        document.print1.factory.printing.Preview();

        document.all("button").style.display = "block";//显示按钮

}



//使界面最大化

maxWin();

function maxWin()

{

      var aw = screen.availWidth;

      var ah = screen.availHeight;

      window.moveTo(0, 0);

      window.resizeTo(aw, ah);

}



function printTure()

{

     document.print1.setData();

     printBase();

     document.all("button").style.display = "none";//隐藏按钮

     document.print1.factory.printing.Print(false);

     document.all("button").style.display = "block";//显示按钮

}



</SCRIPT>

    <link href="${pageContext.request.contextPath }/css/yydataTableColor.css" rel="stylesheet" type="text/css" />

    <style type="text/css">

        body{font-size: 12px; margin: 0px;}

        table{font-size: 12px;}

        .button{width:1300px; margin-top: 20px;}

        .max{width:1300px;}

        .min {width:225px;height:130px;float:left; text-align: center;padding-left: 20px;margin-top: 20px; position:relative;}

        .min img { border: 3px solid #666; cursor: pointer; background-color: #666; margin:0 4px; width:225px; height: 130px; display: block; }

           .button {height: 15px; background-color: #ddf3ff; border: 0px; width:225px;  }

           .button td {background-color: #faebd8;}

    </style>

  </head>

  

  <body>

  <div >

  <div  id="button" >

                            <table >

                                <tr>

                                    <td align="center">

                                        <input class="bginput" onclick="printTure()" type="button" value="打印">

                                         <input   id="idPrint2"   type="button"   value="页面设置" onclick="document.print1.factory.printing.PageSetup();">   

                                         <input   id="idPrint3"   type="button"   value="打印预览"   

                                         onclick="printReport()">   

                                    </td>

                                </tr>

                            </table>

                        </div>

      <div id="printdata"   class="max">

      <SCRIPT language=JavaScript>

var beginMoving=false; var sourceObj=null; var objectObj=null; 

function MouseDownToMove(obj){ obj.style.zIndex=1; obj.mouseDownY=event.clientY; obj.mouseDownX=event.clientX; beginMoving=true; obj.setCapture(); sourceObj=obj; objectObj=null; } 

function MouseMoveToMove(obj){ if(!beginMoving) return false; obj.style.top = (event.clientY-obj.mouseDownY); obj.style.left = (event.clientX-obj.mouseDownX); } function MouseUpToMove(obj){ if(!beginMoving) return false; obj.releaseCapture(); obj.style.top=0; obj.style.left=0; obj.style.zIndex=0; beginMoving=false; window.setTimeout("swapFun()",10); }

function MouseOverFun(obj) { objectObj=obj; } function swapFun() { if(sourceObj!=null && objectObj!=null ) sourceObj.swapNode(objectObj); sourceObj=null; objectObj=null; } 

</SCRIPT>

      <c:forEach var="item" items="${picList}"  varStatus="i">

      <div class="min" onmousemove="MouseMoveToMove(this)" onmouseup="MouseUpToMove(this)" onmousedown="MouseDownToMove(this)" onmouseover="MouseOverFun(this)">

      <span style="height:20px;" title="${item.name}">

       <c:if test="${fn:length(item.name)<=15}">${item.name}</c:if>

       <c:if test="${fn:length(item.name)>15}">${fn:substring(item.name,0,12)}...</c:if>

      </span>

      <img  src="${pageContext.request.contextPath }${item.path eq null?'/upload/zanwu.jpg':item.path}" />

      </div>

      </c:forEach>

    </div>

    </div>



    <iframe  id="print1"  name="print1"  frameborder="0" width="0px"  height="0px" scrolling="no"  src="../conn/picture/print_iframe.jsp" allowtransparency="true">

    </iframe>



  </body>

</html>

代码如下。。。。留着自己看。

你可能感兴趣的:(IE)