Newer
Older
urbanLifeline_YanAn / src / directive / el-drag-div / index.js
@zhangqy zhangqy on 3 Oct 881 bytes first commit
  1. // v-divDrag: 弹窗拖拽属性
  2.  
  3. export default {
  4. // 指令的定义
  5. mounted: function (el, binding) {
  6. let oDiv = el; // 获取当前元素
  7. // 获取指令的值
  8. const ifDrag = binding.value;
  9. if (ifDrag) {
  10. oDiv.onmousedown = e => {
  11. //console.log("onmousedown");
  12. // 算出鼠标相对元素的位置
  13. let disX = e.clientX - oDiv.offsetLeft;
  14. let disY = e.clientY - oDiv.offsetTop;
  15.  
  16. document.onmousemove = e => {
  17. // 用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
  18. let left = e.clientX - disX;
  19. let top = e.clientY - disY;
  20.  
  21. oDiv.style.left = left + 'px';
  22. oDiv.style.top = top + 'px';
  23. };
  24.  
  25. document.onmouseup = e => {
  26. document.onmousemove = null;
  27. document.onmouseup = null;
  28. };
  29. };
  30. }
  31. },
  32. };