一个用ajax实现表格拖拽

最新推荐文章于 2025-08-19 15:31:16 发布
原创 最新推荐文章于 2025-08-19 15:31:16 发布 · 2k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ajax #string #path #import #function #class

这里用ajax + servlet 实现一个表格拖 拽

用了JDOM动态记录当前的坐标数 写为XML文档。

需要一个JDOM.jar包

http://download.chinaunix.net/down.php?id=9915&ResourceID=5020&site=1

//JSP页面

<%@page contentType="text/html;charset=gb2312"%>1
<HTML>
<HEAD>
<TITLE>用户登录</TITLE>
</HEAD>
<body onLoad="javascript:document.all.userName.focus();">
<BR>
<style type="text/CSS">  body
  {
  margin:0px;
  }
  #aim /*设置目标层样式*/
  {
  position:absolute;/*控制层的位置所必须的style*/
  width:200px;
  height:30px;
  }
  #sourceLayer, #cloneLayer
  {
  position:absolute;/*控制层的位置所必须的style*/
  width:300px;
  height:50px;
  border:1px solid #666666;
  background-color:#CCCCCC;
  cursor:move;
  }
  .docked
  {
  display:none;
  filter:alpha(opacity=100);
  }
  .actived
  {
  display:block;
  filter:alpha(opacity=70);
  }
</style>
<!--<div id="aim">放置范围</div>-->
<div id="div1"></div>
<div id="cloneLayer" class="docked" unselectable="off"></div>
<FORM name="form1" method="post" action="../loginservlet">
<div id="sourceLayer" unselectable="off">
  <table width=240 border=0 align="center">
    <tr>
      <td>
        <table width=100% border=0 cellspacing=0 cellpadding=1 bgcolor=99CC99>
          <tr>
            <td>
              <table width=100% border=0 cellspacing=0 cellpadding=0 bgcolor="#f7fff7" align=center valign=top>
                <tr>
                  <td align=left class="ahsPortletTitle" id="title">                    &nbsp;
                    <img src="../graphics/portlethdr1.gif" align="absMiddle">
                    &nbsp;
                    用户登录
</td>
                </tr>
                <tr>
                  <td align=center class="normalSmall">
                    <table width=100% cellspacing=1 cellpadding=1 border=0>
                      <tr>
                        <td colspan=2 height=6>
                          <img src="Machine/graphics/asybase.gif" height=6>
                          <div id="errMsg" class="errMessage" style="display:none">                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td align=right class=normalSmall>                          用户名:
                          &nbsp;
</td>
                        <td align=left>
                          <input type=text class=textInput name=userName value="">
                        </td>
                      </tr>
                      <tr>
                        <td align=right class=normalSmall>                          密码:
                          &nbsp;
</td>
                        <td align=left>
                          <input type=password class=textInput name=passWord value="">
                        </td>
                      </tr>
                      <tr>
                        <td align=right class=normalSmall>&nbsp;</td>
                        <td align=left class=normalSmall>
                          <INPUT type="submit" class="normalButton" name="login" value="登陆">
                          <INPUT type="reset" class="normalButton" name="cancel" value="取消">
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>
</FORM>
<script type="text/javascript" language="javascript">

<!--


//设置层对象

var aim;

var sourceLayer;

var cloneLayer;

 

//定义各个层初始位置

var aimX;

var aimY;

var orgnX;

var orgnY;

 

//拖拽过程中的变量

var draging = false; //是否处于拖拽中

var offsetX = 0;     //X方向左右偏移量

var offsetY = 0;     //Y方向上下偏移量

var back;            //返回动画对象

var thisX ;          //当前clone层的X位置

var thisY ;          //当前clone层的Y位置

var time ;

var stepX ;          //位移速度

var stepY ;          //位移速度

 

//初始化拖拽信息

/*

  initAimX 目标x坐标

  initAimY 目标y坐标

  initOrgnX 拖拽源x坐标

  initOrgnY 拖拽源y坐标

*/

//获得层对象

 

function getLayer(inSource,inClone)

{


  //初始化
  document.getElementById("div1").innerHTML="";
    sourceLayer = document.getElementById(inSource);

    cloneLayer = document.getElementById(inClone);

}

 

function initDrag(initOrgnX,initOrgnY)

{

    orgnX = initOrgnX;

    orgnY = initOrgnY;

    //设置各个开始层的位置


    sourceLayer.style.pixelLeft = orgnX;

    sourceLayer.style.pixelTop = orgnY;

    cloneLayer.style.pixelLeft = orgnX;

    cloneLayer.style.pixelTop = orgnY;

}

 

//准备拖拽

function BeforeDrag()

{

    if (event.button != 1)

    {

        return;

    }

    cloneLayer.innerHTML = sourceLayer.innerHTML; //复制拖拽源内容

    offsetX = document.body.scrollLeft + event.clientX - sourceLayer.style.pixelLeft;

    offsetY = document.body.scrollTop + event.clientY - sourceLayer.style.pixelTop;

    cloneLayer.className = "actived";

    draging = true;

}

 

//拖拽中

function OnDrag()

{
  //如果不在拖拽中
    if(!draging)

    {

        return;

    }

    //更新位置

    event.returnValue = false;

    cloneLayer.style.pixelLeft = document.body.scrollLeft + event.clientX - offsetX;

    cloneLayer.style.pixelTop = document.body.scrollTop + event.clientY - offsetY;

}

 

//结束拖拽

function EndDrag()

{

    if (event.button != 1)
    {

        return;

    }

    draging = false;
    //动态的创建目标层
  var str="<div id='aim'></div>";
  //给目标层加进去
  document.getElementById("div1").innerHTML=str;
  //得到目标层的对象
  aim=document.getElementById("aim");
  //更改目标层的座标
  aim.style.pixelLeft=cloneLayer.style.pixelLeft;
  aim.style.pixelTop=cloneLayer.style.pixelTop;

    if (event.clientX >= aim.style.pixelLeft && event.clientX <= (aim.style.pixelLeft + aim.offsetWidth) &&

        event.clientY >= aim.style.pixelTop && event.clientY <= (aim.style.pixelTop + aim.offsetHeight))

    {

        //拖拽层位于目标中，自动定位到目标位置

        sourceLayer.style.pixelLeft = aim.style.pixelLeft;

        sourceLayer.style.pixelTop = aim.style.pixelTop;

         cloneLayer.className = "docked";
         //保存XML文档
         saveXml(sourceLayer.style.pixelLeft,sourceLayer.style.pixelTop);
         /*

         **  这里完成之后可以用xml保存当前位置.

         **  下次用户进入的时候

         **  就初始化源拖拽层为xml当中的数据了

         */

    }

    else

    {

    //拖拽位于目标层外，将拖拽源位置复原

     thisX = cloneLayer.style.pixelLeft;

     thisY = cloneLayer.style.pixelTop;

     offSetX = Math.abs(thisX - orgnX);

     offSetY = Math.abs(thisY - orgnY);

     time = 500;//设置动画时间

     stepX = Math.floor((offSetX/time)*20);

     stepY = Math.floor((offSetY/time)*20);

     if(stepX == 0)

         stepX = 2;

     if(stepY == 0)

         stepY = 2;

 

    //开始返回动画

     moveStart();

    }

}
 function saveXml(x,y)
 {
   createXMLHttpRequest();
   var url="../save?x="+x+"&y="+y+"&title="+document.getElementById('title').innerText;
   xmlHttp.open("post",url,true);
   xmlHttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
   xmlHttp.onreadystatechange=function ()
   {
   }
   xmlHttp.send(null);
 }

 


function moveStart()

{

     back = setInterval("MoveLayer();",15);

}

 

//设置返回的动画效果

function MoveLayer()

{

    //位于目标左上

     if(cloneLayer.style.pixelLeft <= orgnX && cloneLayer.style.pixelTop <= orgnY)

     {

         cloneLayer.style.pixelLeft += stepX;

         cloneLayer.style.pixelTop += stepY;

         //如果位移超过目标则设置速度为pix.并向反方向回移.此处实现了弹簧效果.下同

         if(cloneLayer.style.pixelLeft > orgnX)

         {

              stepX = 1;

         }

         if(cloneLayer.style.pixelTop > orgnY)

         {

              stepY = 1;

         }

         //在X或Y轴上坐标相同则不发生位移

         if(cloneLayer.style.pixelLeft == orgnX)

         {

              stepX = 0;

         }

         if(cloneLayer.style.pixelTop == orgnY)

         {

              stepY = 0;

         }

         if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)

         {

              EndMove();

         }

     }

 

     //位于目标左下

     else if(cloneLayer.style.pixelLeft <= orgnX && cloneLayer.style.pixelTop >= orgnY)

     {

         cloneLayer.style.pixelLeft += stepX;

         cloneLayer.style.pixelTop -= stepY;

         if(cloneLayer.style.pixelLeft > orgnX)

         {

              stepX = 1;

         }

         if(cloneLayer.style.pixelTop < orgnY)

         {

              stepY = 1;

         }

         if(cloneLayer.style.pixelLeft == orgnX)

         {

              stepX = 0;

         }

         if(cloneLayer.style.pixelTop == orgnY)

         {

              stepY = 0;

         }

         if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)

         {

              EndMove();

         }

     }

 

     //位于目标右上

     else if(cloneLayer.style.pixelLeft >= orgnX && cloneLayer.style.pixelTop <= orgnY)

     {

         cloneLayer.style.pixelLeft -= stepX;

         cloneLayer.style.pixelTop += stepY;

         if(cloneLayer.style.pixelLeft < orgnX)

         {

              stepX = 1;

         }

         if(cloneLayer.style.pixelTop > orgnY)

         {

              stepY = 1;

         }

         if(cloneLayer.style.pixelLeft == orgnX)

         {

              stepX = 0;

         }

         if(cloneLayer.style.pixelTop == orgnY)

         {

              stepY = 0;

         }

         if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)

         {

              EndMove();

         }

     }

 

     //位于目标右上

     else if(cloneLayer.style.pixelLeft >= orgnX && cloneLayer.style.pixelTop >= orgnY)

     {

         cloneLayer.style.pixelLeft -= stepX;

         cloneLayer.style.pixelTop -= stepY;

         if(cloneLayer.style.pixelLeft < orgnX)

         {

              stepX = 1;

         }

         if(cloneLayer.style.pixelTop < orgnY)

         {

              stepY = 1;

         }

         if(cloneLayer.style.pixelLeft == orgnX)

         {

              stepX = 0;

         }

         if(cloneLayer.style.pixelTop == orgnY)

         {

              stepY = 0;

         }

         if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)

         {

              EndMove();

         }

     }

 

     //到达目标

     else

     {

         EndMove();

     }

}

 

//停止返回动画

function EndMove()

{

         sourceLayer.style.pixelLeft = orgnX;

         sourceLayer.style.pixelTop = orgnY;

         cloneLayer.style.pixelLeft = orgnX;

         cloneLayer.style.pixelTop = orgnY;

         cloneLayer.className = "docked";

         clearInterval(back);

}

 

//主拖拽函数

function startDraging(inSource,inClone,initOrgnX,initOrgnY)

{

    getLayer(inSource,inClone)

    initDrag(initOrgnX,initOrgnY);

    sourceLayer.onmousedown = BeforeDrag;

    document.onmousemove = OnDrag; //这里如果用cloneLayer,在拖拽中会选中cloneLayer里面内容,进而出现一些bug...

    cloneLayer.onmouseup = EndDrag;

}

 var xmlHttp;
 function createXMLHttpRequest()
 {
   if(window.ActiveXObject)
   {
     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   else if(window.XMLHttpRequest)
   {
     xmlHttp=new XMLHttpRequest();
   }
 }
 function getPosition()
 {
   createXMLHttpRequest();
   var url="../login?title="+document.getElementById("title").innerText;
   xmlHttp.open("post",url,true);
   xmlHttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
   xmlHttp.onreadystatechange=call;
   xmlHttp.send(null);
 }
 function call()
 {
   if(xmlHttp.readyState==4)
   {
     if(xmlHttp.status==200)
     {

       var result=xmlHttp.responseXML.getElementsByTagName("result")[0];
       var x=result.childNodes[2].firstChild.nodeValue;
       var y=result.childNodes[3].firstChild.nodeValue;
       //调用

       startDraging("sourceLayer","cloneLayer",x,y);

     }
     else
     {
       alert(xmlHttp.status);
     }
   }
 }
 //调用
getPosition();
//-->

</script>

</body>
</html>
//动态查询SERVLET

package myproduct;

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import java.util.*;

public class login extends HttpServlet {
    private static final String CONTENT_TYPE = "text/xml; charset=gb2312";

    //Initialize global variables
    public void init() throws ServletException {
    }

    //Process the HTTP Get request
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws
            ServletException, IOException {
        response.setContentType(CONTENT_TYPE);
        PrintWriter out = response.getWriter();
        //得到头
        String title=new String(request.getParameter("title").getBytes("ISO8859-1"),"GBK");
        if(title==null)
            return ;
        String xmlPath=getServletContext().getRealPath("Position.xml");

        //得到ID
        String pid=dat.getId("ptitle",xmlPath,title.trim());
        LoginEntity ent=dat.getValue("Position.xml","pid",pid);
        out.println("<?xml version=/"1.0/" encoding=/"gb2312/"?>");
        out.println("<root>");
        out.println("<result>");
        out.println("<pid>"+ent.getPid()+"</pid>");
        out.println("<ptitle>"+ent.getPtitle()+"</ptitle>");
        out.println("<pixelx>"+ent.getPixelx()+"</pixelx>");
        out.println("<pixely>"+ent.getPixely()+"</pixely>");
        out.println("</result>");
        out.println("</root>");
        out.close();
    }

    //Process the HTTP Post request
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws
            ServletException, IOException {
        doGet(request, response);
    }

    //Clean up resources
    public void destroy() {
    }
}

//实体类

package myproduct;

public class LoginEntity {
    private int pid;
    private String ptitle;
    private String pixelx;
    private String pixely;
    public LoginEntity() {
    }

    public void setPid(int pid) {
        this.pid = pid;
    }

    public void setPtitle(String ptitle) {
        this.ptitle = ptitle;
    }

    public void setPixelx(String pixelx) {
        this.pixelx = pixelx;
    }

    public void setPixely(String pixely) {
        this.pixely = pixely;
    }

    public int getPid() {
        return pid;
    }

    public String getPtitle() {
        return ptitle;
    }

    public String getPixelx() {
        return pixelx;
    }

    public String getPixely() {
        return pixely;
    }

}

//JDOM公用类

package myproduct;
import org.jdom.*;
import org.jdom.input.*;
import org.jdom.output.*;
import java.util.*;
import java.io.*;
public class ParseDom {
    public ParseDom() {
    }
    private static Document dom;
    /**
     *
     * @param path String  XML文档的PATH
     * @return Document   DOM对象
     */
    public static Document getDocument(String path)
    {
        //创建一个sax解析器
        SAXBuilder sax=new SAXBuilder();
        //通过传过的XML路径进行解析
        try {
             dom=sax.build(path);
            return dom;

        } catch (IOException ex) {
            ex.printStackTrace();
        } catch (JDOMException ex) {
            ex.printStackTrace();
        }
        return null;

    }
    /**
     *
     * @param path String  XML路径
     * @return ArrayList  所有的XML信息
     */
    public static List getAllElementValue(String path)
    {
        //得到一个dom对象
        if(dom == null)
        {
            dom=getDocument(path);
        }
        //得到根节点
        try
        {
            Element rootElement = dom.getRootElement();
            return rootElement.getChildren();
        }
        catch(Exception e)
        {
            e.printStackTrace();
        }
        return null;
    }
    /**
     *
     * @param path String XML路径
     * @param ElementName String  跟据指定的元素的名称
     * @return ArrayList  所有的XML信息
     */
    public static List getElementValue(String path,String ElementName)
    {
            //得到一个dom对象
          if(dom == null)
          {
              dom=getDocument(path);
          }
          //得到根节点
          try
          {
              Element rootElement = dom.getRootElement();
              Element el=rootElement.getChild("position");
              List l=el.getChildren(ElementName);
            Iterator it=  l.iterator();
            if(it.hasNext())
            {
                System.out.println(((Element)it.next()).getChildText("pid"));
            }
              return null;
          }
          catch(Exception e)
          {
              e.printStackTrace();
          }
          return null;

    }
    /**
     *
     * @param path String  要写入的文件
     * @return boolean  是否成功
     */
    public static boolean xmlOutputer(String path,Document doc)
    {
        boolean flg=false;
        //设置XML文档的格式
        Format format=Format.getCompactFormat();
        format.setEncoding("gb2312"); //设置XML文件的字符为gb2312
        format.setIndent("  ");//设置XML文件缩进为2个空格
        XMLOutputter xmlOut=new XMLOutputter(format);
        try {
            if (doc != null) {
                xmlOut.output(doc, new FileOutputStream(path));
                flg=true;
            }
            else
            {
                flg=false;
            }
        } catch (IOException ex) {
            ex.printStackTrace();
        }
        return flg;
    }
  
}

//实现查询 和 写入

package myproduct;

import java.util.*;
import org.jdom.*;

public class dat {
    public dat() {
    }

    /**
     * 跟据姓名得到ID
     * @param Elementname String
     * @param path String
     * @param ElementValue Stirn
     * @return LoginEntity
     */
    public static String getId(String Elementname, String path,
                               String ElementValue) {
        //根据节点句子得到一个集合
        List ary = ParseDom.getAllElementValue(path);

        if (!ary.isEmpty()) {
            for (Iterator i = ary.iterator(); i.hasNext(); ) {
                Element el = (Element) i.next();
                if (el.getChildText(Elementname).trim().equals(ElementValue)) {
                   return el.getChildTextTrim("pid");
                }

            }
        }
        return null;
    }

    /**
     * 跟据ID查出所有的信息
     * @param path String
     * @param ElementId String
     * @return LoginEntity
     */
    public static LoginEntity getValue(String path, String ElementId,
                                       String ElementValue) {
        //根据节点句子得到一个集合
        List ary = ParseDom.getAllElementValue(path);
        if (!ary.isEmpty()) {
            for (Iterator i = ary.iterator(); i.hasNext(); ) {
                Element el = (Element) i.next();
                if (el.getChildText(ElementId).trim().equals(ElementValue)) {
                        LoginEntity log = new LoginEntity();
                        log.setPid(Integer.parseInt(el.getChildText("pid")));
                        log.setPtitle(el.getChildText("ptitle"));
                        log.setPixelx(el.getChildText("pixelX"));
                        log.setPixely(el.getChildText("pixelY"));
                        return log;
                    }

                }

            }


        return null;
    }
    /**
     * 保存
     * @param path String
     * @param x String
     * @param y String
     * @param titleValue String
     * @param titleName String
     * @return boolean
     */
    public static boolean saveXml(String path,String x,String y,String titleValue,String titleName)
    {
        boolean flg=false;
        Document dom=ParseDom.getDocument(path);
        Element root=dom.getRootElement();
        List ary=root.getChildren();
        if (!ary.isEmpty()) {
            for (Iterator i = ary.iterator(); i.hasNext(); ) {
                Element el = (Element) i.next();
                if (el.getChildText(titleName.trim()).trim().equals(titleValue.trim())) {
                    el.getChild("pixelX").setText(x);
                    el.getChild("pixelY").setText(y);
                    ParseDom.xmlOutputer(path,dom);
                    flg=true;
                    }

                }

            }
            return flg;

    }
}
//执行写入的SERVLE

package myproduct;

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import java.util.*;

public class save extends HttpServlet {
    private static final String CONTENT_TYPE = "text/html; charset=GBK";

    //Initialize global variables
    public void init() throws ServletException {
    }

    //Process the HTTP Get request
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws
            ServletException, IOException {
        response.setContentType(CONTENT_TYPE);
        PrintWriter out = response.getWriter();

    //得到当前的X座标

        String x=request.getParameter("x");

//得到当前的Y座标
        String y=request.getParameter("y");

//由于可能是中文进行转码
        String title=new String(request.getParameter("title").getBytes("ISO8859-1"),"GBK");
        String xmlPath=getServletContext().getRealPath("Position.xml");
        if(x !=null || !x.equals("") && y!=null || !y.equals("") && !title.equals("") || title!=null)
        {
           dat.saveXml(xmlPath,x,y,title,"ptitle");
        }

        out.close();
    }

    //Process the HTTP Post request
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws
            ServletException, IOException {
        doGet(request, response);
    }

    //Clean up resources
    public void destroy() {
    }
}

 

java拖拽表单_[Java教程]纯JS实现可拖拽表单
weixin_39794385的博客
02-25 320
[Java教程]纯JS实现可拖拽表单02016-09-01 17:00:04转载注明出处！！！转载注明出处！！！转载注明出处！！！因为要用到可拖拽表单，个人要比较喜欢自己动手，不怎么喜欢在不懂实现或者原理的情况下用插件，所以查找资料实现了一个。思路：放入：用mousedown判断鼠标点击的位置是否在触发控件的位置，如果是，mousemove的时候clone一个控件，修改透明度，然后放入容器内的时候...
java 拖拽报表_java实现表格tr拖动的实例(分享)
weixin_33494995的博客
02-13 441
实现功能：实现表格tr拖动，并保存因为拖动改变的等级.jsp代码菜单管理请使用拖拽调整排列顺序 添加菜单cellspacing="0" id="showTable"style="word-wrap: break-word; word-break: break-all;table-layout: inherit;background:#FFFFFF !important;"&...
Ajax效果：可拖拽的表格
03-30
Ajax效果：可拖拽的表格! 值得下载看看!资源免费,大家分享!!
表格列拖动在.html和.jsp中的问题
Clouds
05-06 1100
最近一周在做表格的列拖动
AJAX动态创建表格实例
lihaiyang2的博客
02-27 512
[size=medium]初学AJAX,把一些学习的点滴记录下来!以备以后参考[/size] [code="java"] 使用DOM创建HTML表格 function start(){ //获取body标签 var body = document.getElementsByTagName("body")[0]; //创建一个元素和一个元素 ...
ajax实现表格更新数据,Ajax表格信息更新数据
weixin_34893782的博客
08-06 900
Ajax表格信息更新数据 内容精选换一换本章节主要介绍键值表格组件各配置项的含义。尺寸位置图表尺寸：设置图表的宽和高。单位为px。图表位置：设置图表在画布中的位置。单位为px。键值表格图表尺寸：设置图表的宽和高。单位为px。图表位置：设置图表在画布中的位置。单位为px。全局样式自适应：勾选时，表格会自动适应组件图层的高度。字体：设置组件文本的字体样式。左右间距：输入数值或拖动，创建数据集。POST...
使用jsGrid实现表格行拖拽排序功能详解
gitblog_01093的博客
06-29 357
使用jsGrid实现表格行拖拽排序功能详解 前言 在现代Web应用中，数据表格的交互体验越来越受到重视。jsGrid作为一款轻量级、功能丰富的JavaScript表格插件，提供了行拖拽排序这一实用功能，可以显著提升用户操作体验。本文将深入解析如何使用jsGrid实现表格行的拖拽排序功能。 基本概念 jsGrid简介 jsGrid是一个基于jQuery的轻量级客户端数据网格控件，它支持分页、排序、过...
【前端】Jquery UI +PHP 实现表格拖动排序
qq_25285531的博客
11-08 983
使用jquery ui库实现对表格拖拽排序，并且把排序保存到数据库中
拖拽排序 ajax,通过jquery-ui中的sortable来实现拖拽排序
weixin_29098367的博客
08-06 255
1.引入文件2.给元素附上sortable类3.开启并配置$(function() {$(".sortable").sortable({cursor: "move",items: "tr", //只是tr可以拖动opacity: 0.6, //拖动时，透明度为0.6revert: true, //释放时，增加动画update: function(event, ui) { //更新排序之后var c...
在html页面中用ajax保存一个链表,前端ajax异步传值以及后端接收参数的几种方式...
weixin_32705525的博客
06-25 646
异步传值前台往后台传值呢，有很多种方式，大家听我细细道来。第一种呢，也是最简单的一种，通过get提交方式，将参数在链接中以问号的形式进行传递。// 前台传值方法// 触发该方法调用ajaxfunction testAjax(yourData) {$.ajax({type: "get", // 以get方式发起请求url: "/yourUrl?yourDataName=" + yourData, /...
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
10-16
Vue-draggable是基于Sortable.js的一个Vue组件，Sortable.js是处理列表和可拖拽排序的JavaScript库。Vue-draggable继承了Sortable.js的特性，并且通过Vue的自定义指令的方式使其更易于在Vue项目中使用。 在实现拖拽...
BootStrap table实现表格行拖拽效果
10-17
Bootstrap Table 是一个基于 Bootstrap 框架的动态表格插件，它提供了丰富的功能，包括排序、筛选、分页等。在本案例中，我们将重点讨论如何实现表格行的拖拽功能，这一特性允许用户通过直观的拖放操作来改变表格行...
jquery插件colResizable实现表格列可拖拽伸缩表格大小
03-14
在JavaScript的世界里，jQuery是一个广泛使用的库，它简化了DOM操作、事件处理和Ajax交互等任务。本篇文章将深入探讨如何使用jQuery插件colResizable来实现表格列的拖拽伸缩功能，从而使用户可以根据需要调整表格的...
Sigma Grid实现ajax动态表格(支持分页、列宽拖动、数据排序).zip
11-19
这个压缩包包含的资源是关于如何使用Sigma Grid实现一个通过Ajax动态加载数据、支持分页、列宽可拖动以及数据排序的功能。以下是这些知识点的详细说明： 1. Ajax动态加载： Ajax（Asynchronous JavaScript and XML...
java实现表格tr拖动的实例(分享)
08-28
以上就是一个基本的Java实现表格tr拖动的实例，通过结合前端JavaScript和后端Java，可以创建一个用户友好的、可拖动的表格。这个功能对于需要自定义排序的场景非常有用，如任务管理、菜单配置等。
AJAX 与 ASP 的融合：技术深度解析与应用
lly202406的博客
08-17 358
AJAX是一种基于Web的技术，它允许网页在不重新加载整个页面的情况下与服务器进行交互。通过使用AJAX，可以实现与服务器之间的异步通信，从而提高用户体验。AJAX的核心技术包括JavaScript、XMLHttpRequest对象以及HTML。AJAX与ASP的融合为网络应用开发带来了许多便利。通过本文的介绍，读者可以了解到AJAX与ASP的基本原理、应用场景以及实际开发中的注意事项。在实际开发过程中，结合具体需求，合理运用AJAX与ASP技术，将为构建高质量、高性能的网络应用奠定坚实基础。
AJAX （一）
weixin_45280713的博客
08-19 291
AJAX允许通过与后台的Web服务器交换数据来“异步”更新网页内容。可以更新网页的，而无需重新加载整个页面。更新网页而无需重新加载页面AJAX可以发送和接收各种格式的信息，包括JSON，XML，HTML和文本文件。简而言之，就是使用XMLHttpRequest对象与服务器进行通信。AJAX的两个主要功能使您可以执行以下操作： 向服务器发出请求，而无需重新加载页面 从服务器接收和处理数据AJAX不是一种编程语言，它是一种用于从网页访问Web服务器的技术。
基于 BERT 模型在百度 WebQA 中文数据集上的阅读问答研究
08-19
资源下载链接为： https://pan.quark.cn/s/9bebe4bee876 基于 BERT 模型在百度 WebQA 中文数据集上的阅读问答研究（最新、最全版本！打开链接下载即可用！）
介绍了扫描单分子定位显微镜（scanSMLM）技术及其在三维超分辨体积成像中的应用（含详细代码及解释）
最新发布
08-19
内容概要：本文详细介绍了扫描单分子定位显微镜（scanSMLM）技术及其在三维超分辨体积成像中的应用。scanSMLM通过电调透镜（ETL）实现快速轴向扫描，结合4f检测系统将不同焦平面的荧光信号聚焦到固定成像面，从而实现快速、大视场的三维超分辨成像。文章不仅涵盖了系统硬件的设计与实现，还提供了详细的软件代码实现，包括ETL控制、3D样本模拟、体积扫描、单分子定位、3D重建和分子聚类分析等功能。此外，文章还比较了循环扫描与常规扫描模式，展示了前者在光漂白效应上的优势，并通过荧光珠校准、肌动蛋白丝、线粒体网络和流感A病毒血凝素（HA）蛋白聚类的三维成像实验，验证了系统的性能和应用潜力。最后，文章深入探讨了HA蛋白聚类与病毒感染的关系，模拟了24小时内HA聚类的动态变化，提供了从分子到细胞尺度的多尺度分析能力。 适合人群：具备生物学、物理学或工程学背景，对超分辨显微成像技术感兴趣的科研人员，尤其是从事细胞生物学、病毒学或光学成像研究的科学家和技术人员。 使用场景及目标：①理解和掌握scanSMLM技术的工作原理及其在三维超分辨成像中的应用；②学习如何通过Python代码实现完整的scanSMLM系统，包括硬件控制、图像采集、3D重建和数据分析；③应用于单分子水平研究细胞内结构和动态过程，如病毒入侵机制、蛋白质聚类等。 其他说明：本文提供的代码不仅实现了scanSMLM系统的完整工作流程，还涵盖了多种超分辨成像技术的模拟和比较，如STED、GSDIM等。此外，文章还强调了系统在硬件改动小、成像速度快等方面的优势，为研究人员提供了从理论到实践的全面指导。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值