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);
html5 draggable 随意拖动任意位置
书中自有妍如玉2024-02-02 12:52
相关推荐
阿奇__18 分钟前
深度修改elementUI样式思路小白白一枚11144 分钟前
css的选择器盛夏绽放1 小时前
SassSCSS:让CSS拥有超能力的预处理器xw51 小时前
支付宝小程序IDE突然极不稳定Dolphin_海豚2 小时前
vapor 语法糖是如何被解析的Bdygsl3 小时前
前端开发:HTML(5)—— 表单望获linux3 小时前
【实时Linux实战系列】实时数据流处理框架分析国家不保护废物3 小时前
TailwindCSS:原子化CSS的革命,让React开发爽到飞起!🚀程序视点4 小时前
如何高效率使用 Cursor ?前端领航者4 小时前
重学Vue3《 v-for的key属性:性能差异与最佳实践》