jquery设置图片可手动拖拽

news2025/1/18 3:53:26

JQuery是一款流行的JavaScript框架,可以轻松实现网页交互效果。而其中一种常见效果是图片手动拖拽。以下是设置图片手动拖拽的JQuery代码。

$(document).ready(function() {
var isDragging = false;
var mousePos = { x: 0, y: 0 };
var elemPos = { x: 0, y: 0 };
var $elem = $(".drag-image");
$elem.mousedown(function(event) {
isDragging = true;
mousePos.x = event.pageX;
mousePos.y = event.pageY;
elemPos.x = $elem.offset().left;
elemPos.y = $elem.offset().top;
});
$(document).mousemove(function(event) {
if (isDragging) {
var dx = event.pageX - mousePos.x;
var dy = event.pageY - mousePos.y;
$elem.offset({
left: elemPos.x + dx,
top: elemPos.y + dy
});
}
});
$(document).mouseup(function() {
isDragging = false;
});
});

代码解释:

首先在文档准备就绪时声明变量。isDragging用于判断是否在拖拽状态,mousePos记录鼠标的坐标,elemPos记录需要移动的元素的坐标,$elem是需要进行拖拽的元素。鼠标按下时,设置isDragging为true,并记录鼠标的位置和需要移动的元素的位置。当鼠标移动时,计算出移动的距离,并设置元素的位置。当鼠标抬起时,设置isDragging为false。

需要注意的是,该代码仅适用于鼠标拖拽,对于移动端需进行修改。

演示地址:

醉学网-让您提分更轻松! (nongpin88.com)icon-default.png?t=N7T8http://www.nongpin88.com/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1016065.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Apache Spark 在爱奇艺的应用实践

01 Apache Spark 在爱奇艺的现状 Apache Spark 是爱奇艺大数据平台主要使用的离线计算框架,并支持部分流计算任务,用于数据处理、数据同步、数据查询分析等场景: 数据处理:在数据开发平台中支持开发者提交 Spark Jar 包任务或Spar…

elasticsearch2-es和kibana的安装

个人名片: 博主:酒徒ᝰ. 个人简介:沉醉在酒中,借着一股酒劲,去拼搏一个未来。 本篇励志:三人行,必有我师焉。 本项目基于B站黑马程序员Java《SpringCloud微服务技术栈》,SpringCloud…

第 113 场 LeetCode 双周赛题解

A 使数组成为递增数组的最少右移次数 数据范围小直接模拟… class Solution { public:int minimumRightShifts(vector<int> &nums) {for (int op 0; op < nums.size(); op) {if (is_sorted(nums.begin(), nums.end()))//nums是否已经有序return op;rotate(nums.b…

zerotier-client

title: “zerotier-client” createTime: 2022-10-10T11:50:5108:00 updateTime: 2022-10-10T11:50:5108:00 draft: false author: “zcb” tags: [“zerotier-plant”,“zerotier-client”,“zerotier”] categories: [“zerotier”] description: “测试的” 1.windows 1.1…

【深度学习】Pytorch 系列教程(十二):PyTorch数据结构:4、数据集(Dataset)

目录 一、前言 二、实验环境 三、PyTorch数据结构 0、分类 1、张量&#xff08;Tensor&#xff09; 2、张量操作&#xff08;Tensor Operations&#xff09; 3、变量&#xff08;Variable&#xff09; 4、数据集&#xff08;Dataset&#xff09; 随机洗牌 一、前言 Ch…

【Windows】搭建 FTP 服务器

如果需要开发ftp文件上传下载等功能&#xff0c;就需要搭建个ftp服务器&#xff0c;方便调试。 FTP服务 FTP是文件传输协议&#xff08;File Transfer Protocol&#xff09;的简称&#xff0c;该协议属于应用层协议&#xff08;端口号通常为21&#xff09;&#xff0c;用于In…

【入门篇】ClickHouse最优秀的开源列式存储数据库

文章目录 一、什么是ClickHouse&#xff1f;OLAP场景的关键特征列式数据库更适合OLAP场景的原因输入/输出CPU 1.1 ClickHouse的定义与发展历程1.2 ClickHouse的版本介绍 二、ClickHouse的主要特性2.1 高性能的列式存储2.2 实时的分析查询2.3 高度可扩展性2.4 数据压缩2.5 SQL支…

骨传导耳机有害处吗、骨传导耳机真的不好用吗?

骨传导耳机没有害处。 骨传导耳机是通过将声音传递到颅骨&#xff0c;再由颅骨传递到内耳&#xff0c;从而达到听声音的效果&#xff0c;与传统的耳机不同。 因此&#xff0c;骨传导耳机不会直接对人的身体健康、耳朵产生压力和损伤&#xff0c;也不会影响耳道和中耳的正常功能…

在ios系统上实现更改IP地址

在当今的互联网环境中&#xff0c;我们经常需要更改手机的IP地址来避免一些限制或保护我们的隐私。然而&#xff0c;在iOS系统上&#xff0c;更改IP地址并不像在其他平台上那么容易。因此&#xff0c;本文将分享一种简单的方法&#xff0c;帮助您在iOS系统上免费更改手机的IP地…

浅谈C++|构造.析构函数篇

一对象的初始化和处理 1.1构造函数和析构函数 C拥有构造函数和析构函数&#xff0c;这两个函数将会被编译器自动调用&#xff0c;完成对象初始化和清理工作。对象的初始化和清理工作是编译器强制要我们做的事情&#xff0c;因此如果我们不提供构造和析构&#xff0c;编译器提供…

vue学习之组件化开发

1. vue创建 基于vue2的项目 vue create vue-cli-learning 选择 “Manually select features” 取消勾选“Linter / Formatter” 选择“2.x” 选择“In package.json” 输入“N” 回车

elasticsearch索引同步

通常项目中使用elasticsearch需要完成索引同步&#xff0c;索引同步的方法很多&#xff1a; #1、针对实时性非常高的场景需要满足数据的及时同步&#xff0c;可以同步调用&#xff0c;或使用Canal去实现。 1&#xff09;同步调用即在向MySQL写数据后远程调用搜索服务的接口写…

Springboot -- DOCX转PDF(二)

之前记录了按照模板生成 DOCX 文件、并转换为 PDF 文件的方法 https://blog.csdn.net/qq_40096897/article/details/131979177?spm1001.2014.3001.5501 但是使用效果并不是很理想&#xff0c;转换完的 PDF 格式和原本的文档格式不匹配。所以在此重新找了一个文件转 PDF 的方法…

SpringMVC中的请求重定向和转发

一.概述 当处理器对请求处理完毕后&#xff0c;向其它资源进行跳转时&#xff0c;有两种跳转方式&#xff1a;请求转发与重 定向。而根据所要跳转的资源类型&#xff0c;又可分为两类&#xff1a;跳转到页面与跳转到其它处理器。注意&#xff0c;对于请求转发的页面&#xff0c…

算法通过村第八关-树(深度优先)青铜笔记|经典算法题目

文章目录 前言1. 二叉树里面的双指针1.1 判断两棵树是否相同1.2 对称二叉树1.3 合并二叉树 2. 路径专题2.1 二叉树的所有路径2.2 路径总和 3. 翻转的妙用总结 前言 提示&#xff1a;人类的底里是悲伤&#xff0c;我们都在用厚重的颜料&#xff0c;覆盖那些粗糙的线稿。--张皓宸…

Vulnhub实战-prime1

前言 VulnHub 是一个面向信息安全爱好者和专业人士的虚拟机&#xff08;VM&#xff09;漏洞测试平台。它提供了一系列特制的漏洞测试虚拟机镜像&#xff0c;供用户通过攻击和漏洞利用的练习来提升自己的安全技能。本次&#xff0c;我们本次测试的是prime1。 一、主机发现和端…

Verdi实现信号的平移

在Verilog/System verilog中&#xff0c;# xxx可以实现延迟指定时间的功能&#xff0c;而在使用verdi查看信号波形并进行分析时&#xff0c;同样也可以实现类似的功能。 (注&#xff1a;这种信号平移是有其应用场景的&#xff0c;例如&#xff0c;在某些仿真模型中&#xff0c;…

Vue2电商前台项目——完成加入购物车功能和购物车页面

Vue2电商前台项目——完成加入购物车功能和购物车页面 文章目录 Vue2电商前台项目——完成加入购物车功能和购物车页面一、加入购物车1、路由跳转前先发请求把商品数据给服务器&#xff08;1&#xff09;观察接口文档&#xff08;2&#xff09;写接口&#xff08;3&#xff09;…

知识深度 VS 知识广度

知识深度&#xff1a;帮助更快的朝着目标进。 发知识广度&#xff1a;帮助找到最优的路径。 职业生涯的前期需要执行力&#xff0c;因此需要更多的锻炼知识深度。越往后需要更多的做决策&#xff0c;因此要更多提升知识广度。

git 远程名称 远程分支 介绍

原文&#xff1a; 开发者社区> 越前君> 细读 Git | 让你弄懂 origin、HEAD、FETCH_HEAD 相关内容 读书笔记&#xff1a;担心大佬文章搬家&#xff0c;故整理此学习笔记 远程名称&#xff08;Remote Name&#xff09; Origin 1、 origin 只是远程仓库的一个名称&#xff…