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); 

相关推荐
GIS之路10 分钟前
GDAL 开发起步
前端
被巨款砸中17 分钟前
前端视角下的 Web 安全攻防:XSS、CSRF、DDoS 一次看懂
前端·安全·xss
excel1 小时前
CSS 里的斜杠 /:你可能忽略的小细节
前端
PBitW2 小时前
element plus 使用细节 (二)
前端·vue·element plus·element使用细节
zcz16071278212 小时前
Web详解
前端
良木林2 小时前
JS函数进阶
开发语言·前端·javascript
HelloRevit3 小时前
让B站视频4倍速度播放
前端·javascript·音视频
SEO_juper4 小时前
E-E-A-T与现代SEO:赢得搜索引擎信任的完整策略
前端·搜索引擎·seo·数字营销·seo优化·谷歌seo
一点一木4 小时前
2025 前端 3D 选型指南:Three.js、Babylon.js、WebGPU 深度对比
前端·javascript·3d
岭子笑笑4 小时前
vant 4 暗黑主题源码阅读
前端