jsp中使用js随意移动图片位置效果

最新推荐文章于 2023-07-26 11:26:46 发布

jinchun1223

最新推荐文章于 2023-07-26 11:26:46 发布

阅读量513

点赞数

文章标签： JSP HTML JavaScript ViewUI

本文介绍了一种在网页中实现图片拖拽的方法，并通过JavaScript控制拖拽范围，确保图片只在指定区域内移动，同时提供了另一种不限制边界的拖拽方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

带边框的，只能在边框内移动

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
var xx = 0, yy =0
</script>
<div id=woyingjie
style="position: absolute; top: 0px; left: 0px; width: 1000px; height: 600px; background: green;"></div>
<img src="ys.gif" style='position: absolute;'
ondragstart="setCapture();xx=event.x-this.offsetLeft;yy=event.y-this.offsetTop;"
ondrag='woyingjie(this)' ondragend="releaseCapture();">
<img src="1ys.gif" style='position: absolute;'
ondragstart="setCapture();xx=event.x-this.offsetLeft;yy=event.y-this.offsetTop;"
ondrag='woyingjie(this)' ondragend="releaseCapture();">

不带边框，可以移动带外面！