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

相关推荐
brzhang2 分钟前
读懂 MiniMax Agent 的设计逻辑,然后我复刻了一个MiniMax Agent
前端·后端·架构
西洼工作室9 分钟前
高效管理搜索历史:Vue持久化实践
前端·javascript·vue.js
广州华水科技17 分钟前
北斗形变监测传感器在水库安全中的应用及技术优势分析
前端
开发者如是说40 分钟前
Compose 开发桌面程序的一些问题
前端·架构
旺代1 小时前
Token 存储与安全防护
前端
洋不写bug2 小时前
html实现简历信息填写界面
前端·html
三十_A2 小时前
【无标题】
前端·后端·node.js
excel2 小时前
Vue 编译器源码解读:transformVBindShorthand 的设计与原理
前端
Jeffrey__Lin2 小时前
解决Grid布局下el-table自适应缩小失败的问题
vue.js·elementui·html
时间的情敌2 小时前
Vue3的异步DOM更新:nextTick的正确使用方法
前端·javascript·vue.js