当前位置:   article > 正文

html5 draggable 随意拖动任意位置

html5 draggable 随意拖动任意位置
  1. function drag_start(event) {
  2. var style = window.getComputedStyle(event.target, null);
  3. event.dataTransfer.setData("text/plain",
  4. (parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY));
  5. }
  6. function drag_over(event) {
  7. event.preventDefault();
  8. return false;
  9. }
  10. function drop(event) {
  11. var offset = event.dataTransfer.getData("text/plain").split(',');
  12. var dm = document.getElementById('dragme');
  13. dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
  14. dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
  15. event.preventDefault();
  16. return false;
  17. }
  18. var dm = document.getElementById('dragme');
  19. dm.addEventListener('dragstart',drag_start,false);
  20. document.body.addEventListener('dragover',drag_over,false);
  21. document.body.addEventListener('drop',drop,false);

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/编程革命者/article/detail/62542
推荐阅读
相关标签
  

闽ICP备14008679号