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

 

相关推荐

  1. pyqt5 无边框窗口拖动

    2024-02-02 09:28:02       15 阅读
  2. HTML文本域如何设置为禁止用户手动拖动

    2024-02-02 09:28:02       10 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-02-02 09:28:02       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-02-02 09:28:02       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-02-02 09:28:02       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-02-02 09:28:02       20 阅读

热门阅读

  1. OR-Tools的CP-SAT求解器常用参数设置与说明

    2024-02-02 09:28:02       33 阅读
  2. 2024美赛数学建模F题思路&源码

    2024-02-02 09:28:02       32 阅读
  3. 关于在MacOS安装虚拟机的全过程

    2024-02-02 09:28:02       32 阅读
  4. TP5手动集成GatewayWorker

    2024-02-02 09:28:02       32 阅读
  5. SQL 语句

    2024-02-02 09:28:02       30 阅读
  6. domino 管理员常见命令

    2024-02-02 09:28:02       24 阅读