jquery拖拽定位
修改他人版本
initDrag('.drag')
// 将class或者id渲染成可拖拽
function initDrag(elem) {
var isInit = false;
var defaultZIndex = 1996
var clickZIndex = 2020;
$(elem).css({
"position": "absolute",
"cursor": "move",
"z-index": defaultZIndex
})
var dragging = false;
var iX, iY;
var elemObj; // 当前对象
$(elem).mousedown(function (e) {
dragging = true;
iX = e.clientX - this.offsetLeft;
iY = e.clientY - this.offsetTop;
this.setCapture && this.setCapture();
elemObj = this;
/*获取位置*/
// $("#top").val(this.offsetTop)
// $("#left").val(this.offsetLeft)
return false;
});
console.log("是否已经实例化过:" + isInit)
document.onmousemove = function (e) {
if (dragging) {
var e = e || window.event;
var oX = e.clientX - iX;
var oY = e.clientY - iY;
$(elemObj).css({
"left": oX + "px",
"top": oY + "px",
"z-index": clickZIndex
});
$("#top").val(oY)
$("#left").val(oX)
return false;
}
};
$(document).mouseup(function (e) {
dragging = false;
e.cancelBubble = true;
$(elem).css({
"position": "absolute",
"cursor": "move",
"z-index": defaultZIndex
})
/*异常补货,避免二次渲染失效*/
try {
$(elemObj)[0].releaseCapture();
} catch (error) {
console.error(error)
}
})
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· winform 绘制太阳,地球,月球 运作规律
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理