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

相关推荐
阿奇__18 分钟前
深度修改elementUI样式思路
前端·vue.js·elementui
小白白一枚11144 分钟前
css的选择器
前端·css
盛夏绽放1 小时前
SassSCSS:让CSS拥有超能力的预处理器
前端·css·rust
xw51 小时前
支付宝小程序IDE突然极不稳定
前端·支付宝
Dolphin_海豚2 小时前
vapor 语法糖是如何被解析的
前端·源码·vapor
Bdygsl3 小时前
前端开发:HTML(5)—— 表单
前端·html
望获linux3 小时前
【实时Linux实战系列】实时数据流处理框架分析
linux·运维·前端·数据库·chrome·操作系统·wpf
国家不保护废物3 小时前
TailwindCSS:原子化CSS的革命,让React开发爽到飞起!🚀
前端·css·react.js
程序视点4 小时前
如何高效率使用 Cursor ?
前端·后端·cursor
前端领航者4 小时前
重学Vue3《 v-for的key属性:性能差异与最佳实践》
前端·javascript