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

相关推荐
Keya6 分钟前
使用 tinypng 脚本打包为exe 进行压缩图片
前端·python·程序员
wordbaby12 分钟前
React Router 的 handle 和 useMatches 的作用、场景和联系
前端·react.js
我的div丢了肿么办12 分钟前
ResizeObserver和IntersectionObserver的详细讲解
前端·javascript·vue.js
凌览13 分钟前
斩获 7k Star,这个桌宠项目火了🔥
前端·javascript·后端
opbr14 分钟前
🔥 扔掉虚拟DOM!百行代码实现高性能Vue内核,直接操作DOM竟这么香?
前端
Struggler28119 分钟前
cloudflare r2进行cdn加速
前端
snakeshe101022 分钟前
1. diff-更新 children
前端
啪叽27 分钟前
用纯CSS实现苹果iOS 26的Liquid Glass液体玻璃效果
前端·css·apple
一只大加号27 分钟前
qiankun基座+react+vite子应用搭建微前端
前端
lbr27 分钟前
使用高德地图实现点聚合效果
前端