jsp拖拽功能实现

最新推荐文章于 2023-04-06 17:17:34 发布
最新推荐文章于 2023-04-06 17:17:34 发布
阅读量1.8k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/i5200369/article/details/80769091
版权

IE理论上也可以实现，但是下面测试却没实现不知道什么原因。

1、html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>设置页面展示信息_详情页</title>
<style type="text/css">
	div{
		width:50% !important;
	}
</style>
</head>
<body>
<div width='50% !important' style="float: left" id='foo'>
    <li style="background-color: white">1</li>
     <li style="background-color: white">2</li>
</div>
<div width='50% !important' style="float: left" id='bar'>
	 <li style="background-color: gray">3</li>
	  <li style="background-color: gray">4</li>
</div>

<script type="text/javascript" src="js/Sortable.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/appInfo.js"></script>
</body>
</html>

2、需要的js

链接地址：https://pan.baidu.com/s/1JR7G3bD1BtsD8J4IPvTvRQ

密码：nd6m



i5200369
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小例子，jsp实现的拖拽功能
12-22
小例子，jsp实现的拖拽功能，有兴趣的过来看看
基于jsp页面的拖拽功能
11-09
基于jsp页面的拖拽功能，用户可以互相实现拖拽
html或者jsp模块拖拽
weixin_37623470的博客
05-05 810
将一个div拖拽到当前页面任意位置，鼠标松开之后div固定在松开时的位置。 上面是效果。 下面是源码： <!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title></title> <style type="text/css...
javascript 实现图片拖动
dianliao7817的博客
11-06 223
javascript实现图片拖动效果并不难，主要的思路如下 1：给图片绑定监听鼠标按下对象，设置拖动属性为true 2：鼠标抬起：拖动属性为false 鼠标移动：改变坐标即可，新坐标=图片原始坐标+鼠标移动后坐标-鼠标移动前坐标 注意事项 要给图片的位置属性设为fixed或者absolute，并且要图片复制初始的left和top属性 代码如下 <!DOCT...
jsp页面div拖动案例
08-13
ie和火狐都可以用,在开发中可以方便的帮你处理页面div拖动的问题
页面实现拖拽功能小例
08-12
jsp页面中实现元素的拖拽，大家可以下载看看，只收取一分哦
jqeury实现列表拖拽排序
05-02
在JSP页面中，我们可以通过以下步骤来实现列表拖拽功能： 1. **定义可拖拽元素**：首先需要为可拖拽的元素添加特定的CSS类（如`.myTr`），以便通过jQuery选择器对其进行操作。 ```javascript $(".myTr")....
jsp 图片拖拽排序,img src自动改变
01-26
拖拽功能的核心是`dragstart`、`drag`、`dragend`这三个事件。在`dragstart`事件中，我们可以获取到被拖动元素的信息；在`drag`事件中，可以追踪拖动过程；在`dragend`事件中，处理拖放结束后的逻辑，如更新图片的...
JSP 可拖拽浮动窗口
05-24
一款javascript开发的浮动窗口，支持最小化，支持鼠标拖拽，可以设定弹出事件，可以进行初始化位置以及大小。完全面向对象编程，简单易用的一款javascript的控件
【JS】原生js实现拖拽功能基本思路
LZGS_4的专栏
02-05 1万+
如果要设置物体拖拽，那么必须使用三个事件，并且这三个事件的使用顺序不能颠倒。 onmousedown：鼠标按下事件onmousemove：鼠标移动事件onmouseup：鼠标抬起事件   拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变。当然，并不是任何时候移动鼠标都要造成
一个简单的行拖动效果 _id="table"
Jonny的博客
02-10 227
一个简单的行拖动效果 //原文链接: //http://www.cnblogs.com/rubylouvre/archive/2011/04/16/2018148.html by 司徒正美 显示效果 [img]http://dl2.iteye.com/upload/attachment/0122/9846/0e5a5ceb-d735-3b55-8f8e-33fd86334729.p...
jsp中使用js随意移动图片位置效果
jinchun1223的专栏
06-26 470
带边框的，只能在边框内移动 &lt;%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/htm
调实JSPDEV的时候遇到了问题Cannot inherit from final class
jiayue's BLOG
04-28 2430
在看《jsp应用开发详解第二版》遇到了问题调实JSPDEV的时候javax.servlet.ServletException: Cannot inherit from final class org.apache.jasper.servlet.JspServlet.service(JspServlet.java:256) javax.servlet.http.HttpServlet.ser
前端实现拖拽的方案
望京十三兄的博客
04-06 3615
创建一个区域 只需要在标签上添加 ondragover 和 ondrop 方法即可，表示这个区域可放置并进行处理。此时，元素已经可以拖动了，但会显示一个禁止的图标，这是因为没有可放置的区域。还需要在需要拖动的元素上添加 ondragstart 方法。
DIV+AJAX+JS+JSP实现页面拖动并且保存布局COOKIE值到数据库
ssdate的专栏
06-22 3035
<br /><!--最新整理--><br /><br /><br />这是以前做过的一套程序，研究了一天，通过搜索资料自己修改出来找个功能，虽然最后在项目中做出来的效果很不完美，但是这个功能却是我研究的结果，还是拿出来跟大家分享下，有能力的朋友仔完善一下！<br />功能：从数据库里获取页面的模块数据，根据cookie值将模块布局在页面，并且拖动模块可以随意部署页面布局，并且将cookie值更新至数据库<br />-----------------------------------------------
JS实现拖动图片
万豪给给的博客
08-01 1万+
很实用的技术，可以多看看 event #box { width: 100px; height: 100px; background-color: aquamarine; position: absolute; }
js原生拖拽事件（HTML5的拖放 API）
热门推荐
12-22 3万+
在HTML5之前，如果要实现拖放效果，一般会使用mousedown、mousemove和mouseup三个事件进行组合来模拟出拖拽效果，比较麻烦。而HTML5规范实现了原生拖放功能，使得元素拖放的实现更加方便和高效。 默认情况下，图像、链接和文本是可以拖动的。文本只有在被选中的情况下才能拖动，而图像和链接在任何时候都可以拖动。 HTML5为所有的HTML元素规定了一个draggable属性，表
jsp从数据库调用经纬度在百度地图上显示路径轨迹
最新发布
06-28
### 回答1： 要实现这个功能，需要以下步骤： 1. 在数据库中存储经纬度信息，可以使用MySQL等关系型数据库或者MongoDB等文档型数据库。 2. 在JSP页面中编写Java代码，通过JDBC连接数据库，查询经纬度信息，并将其存储在Java对象中。 3. 使用百度地图API，在JSP页面中嵌入地图，并将Java对象中的经纬度信息传递给地图API，绘制路径轨迹。 4. 可以使用JavaScript或者jQuery等前端技术，对地图进行交互操作，比如缩放、拖拽等。 需要注意的是，百度地图API需要申请密钥才能使用，具体申请方法可以参考百度地图开发者中心的文档。同时，为了保证数据的安全性，需要对数据库连接进行安全设置，比如使用SSL加密等。 ### 回答2： JSP 作为 Java 服务器页面，可以调用后端的 Java 代码来从数据库中获取经纬度的信息，并将这些信息传递给百度地图 JavaScript API，以在页面上绘制路径轨迹。 首先，需要在后端编写 Java 代码来执行数据库查询操作，获取经纬度信息并将其转换为 JSON 格式或其他格式的数据，以便在前端使用。可以使用 JDBC 连接数据库，执行 SELECT 查询语句，将结果集转换为 JSON 对象或其他 Java 对象。 然后，在前端页面的 JSP 文件中引入百度地图 JavaScript API，通过 API 中提供的绘制轨迹的方法将从数据库中获取到的经纬度信息绘制在地图上。可以创建一个 JavaScript 函数，在页面加载完成后从后端获取经纬度信息，然后使用 API 中的 Polyline 对象绘制路径轨迹。Polyline 对象可以接受一个数组参数，数组中包含多个经纬度坐标点，即路径的两个端点和中途经过的点。 在绘制路径轨迹的过程中，还可以根据需要添加其他功能，例如显示标记点、调整地图缩放级别、添加控件等等。此外，在获取经纬度信息的过程中，还需要考虑如何处理异常情况，例如数据库连接失败、查询结果为空等等。 总之，通过使用 JSP 和百度地图 JavaScript API，可以方便地将从数据库中获取的经纬度信息在网页上展示为路径轨迹，具有一定的实用价值。 ### 回答3： JSP可以通过数据库调用经纬度，在百度地图上显示路径轨迹，具体步骤如下： 1.准备工作 在JSP页面中，需要引用百度地图API的相关库文件，包括： ``` <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script> ``` 其中`ak`是您在百度地图开放平台申请的密钥，`MarkerClusterer`是用于对多个标记进行聚合显示的组件库。 2.获取数据 使用JDBC连接数据库，并执行相应的SQL语句获取经纬度数据，存储到一个Java List中： ``` List<LatLng> path = new ArrayList<LatLng>(); // 使用JDBC连接数据库，查询经纬度数据并存储到path中 Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "password"); String sql = "SELECT latitude, longitude FROM track ORDER BY timestamp"; Statement stmt = conn.createStatement(); ResultSet rs = stmt.executeQuery(sql); while (rs.next()) { double lat = rs.getDouble("latitude"); double lng = rs.getDouble("longitude"); LatLng point = new LatLng(lat, lng); path.add(point); } ``` 这里假设数据库中存储的是轨迹数据，包括纬度、经度和时间戳。根据时间戳排序，保证轨迹按照时间顺序绘制。 3.绘制轨迹 将获取到的经纬度数据，使用`Polyline`对象在地图上绘制轨迹： ``` // 创建轨迹线条对象 PolylineOptions polylineOptions = new PolylineOptions(); // 遍历经纬度数据，添加到轨迹线条中 for (LatLng point : path) { polylineOptions.add(point); } // 设置轨迹线条样式 polylineOptions.color(Color.BLUE); polylineOptions.width(5); // 将轨迹线条添加到地图上 Polyline polyline = (Polyline) map.addOverlay(polylineOptions); ``` 在上述代码中，`PolylineOptions`是用于设置轨迹线条样式的类，`color`和`width`分别表示线条颜色和宽度，`map`是`BaiduMap`对象，可通过初始化时返回的`Map`对象获取。 4.聚合标记 如果轨迹点较多，会导致地图上标记过于密集，影响视觉效果。这时可以使用`MarkerClusterer`对标记进行聚合显示： ``` // 创建聚合标记对象 MarkerClusterer clusterer = new MarkerClusterer(map); // 创建轨迹点标记，并添加到聚合标记对象中 for (int i = 0; i < path.size(); i++) { LatLng point = path.get(i); MarkerOptions markerOptions = new MarkerOptions().position(point) .icon(BitmapDescriptorFactory.fromResource(R.drawable.icon_gcoding)) .zIndex(i); Marker marker = (Marker) map.addOverlay(markerOptions); clusterer.addMarker(marker); } // 设置聚合样式 clusterer.setClusterClickable(true); clusterer.setClusterCheckable(false); ``` 在上述代码中，`MarkerOptions`是用于设置标记样式的类，`icon`表示标记图标。`zIndex`属性用于设置标记在同一个位置时的叠放顺序，保证最新的轨迹点可以在前面显示。 以上是通过JSP从数据库调用经纬度，在百度地图上显示路径轨迹的完整流程。可以根据具体的业务需求，进行相应的修改和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值