html5 draggable 随意拖动任意位置

复制代码
function drag_start(event) {
    var style = window.getComputedStyle(event.target, null);
    event.dataTransfer.setData("text/plain",
    (parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY));
} 
function drag_over(event) { 
    event.preventDefault(); 
    return false; 
} 
function drop(event) { 
    var offset = event.dataTransfer.getData("text/plain").split(',');
    var dm = document.getElementById('dragme');
    dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
    dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
    event.preventDefault();
    return false;
} 
var dm = document.getElementById('dragme'); 
dm.addEventListener('dragstart',drag_start,false); 
document.body.addEventListener('dragover',drag_over,false); 
document.body.addEventListener('drop',drop,false); 

相关推荐
晴天1611 分钟前
VSCodium 项目介绍
前端·javascript·vscode
世岩清上16 分钟前
展厅数字内容同质化严重,怎样打造专属叙事风格?
大数据·前端·javascript·人工智能·html·音视频·展厅改造
晴天1618 分钟前
前端动画体系全解析:类型、实现方案与工程选型最佳实践
前端
持敬chijing36 分钟前
Web前后端开发-JavaScript 入门教程
开发语言·前端·javascript
李高钢37 分钟前
Python Django 框架入门:从零搭建你的第一个 Web 应用
前端·python·django
PC2005_cloud39 分钟前
Rust学习笔记:所有权、借用与生命周期——Rust的核心机制
前端·后端
leoZ23141 分钟前
2026-09-10-静态扫描连错三次-用运行环境当裁判
前端·javascript·vue.js·人工智能·opencv·机器学习·数据挖掘
Maxkim1 小时前
我把一个"会自己查资料"的 AI 助手塞进了浏览器侧边栏,开源了
前端·javascript
计算机魔术师1 小时前
英伟达要投100亿美元入股Anthropic,史上最大IPO的底牌
前端
yume_sibai2 小时前
02-Flutter进阶开发
前端·flutter