drag.vue 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <template>
  2. <div id="dragView">
  3. <header @mousedown="mousedown">
  4. <span>头部</span>
  5. <span class="close_btn" @click="close">X</span>
  6. </header>
  7. <main>
  8. <iframe :src="iframeSrc" frameborder="0"></iframe>
  9. </main>
  10. </div>
  11. </template>
  12. <script>
  13. export default {
  14. name: 'Window',
  15. props: {
  16. "iframeSrc": String
  17. },
  18. data() {
  19. return {
  20. title: '标题',
  21. selectElement: ''
  22. }
  23. },
  24. methods: {
  25. mousedown(event) {
  26. this.selectElement = document.getElementById('dragView')
  27. var div1 = this.selectElement
  28. this.isDowm = true
  29. var distanceX = event.clientX - this.selectElement.offsetLeft
  30. var distanceY = event.clientY - this.selectElement.offsetTop
  31. document.onmousemove = function (ev) {
  32. var oevent = ev || event
  33. div1.style.left = oevent.clientX - distanceX + 'px'
  34. div1.style.top = oevent.clientY - distanceY + 'px'
  35. }
  36. document.onmouseup = function () {
  37. document.onmousemove = null
  38. document.onmouseup = null
  39. }
  40. },
  41. close(){
  42. this.$emit('closeDrag')
  43. }
  44. }
  45. }
  46. </script>
  47. <style lang="less" scoped>
  48. #dragView{
  49. position: absolute;
  50. z-index: 2001;
  51. top: 332px;
  52. left: 449px;
  53. width: 300px;
  54. height: 300px;
  55. text-align: center;
  56. border: 1px solid rgb(102, 102, 153);
  57. background-color: rgb(255, 255, 255);
  58. overflow: hidden;
  59. header{
  60. position: absolute;
  61. width: 100%;
  62. text-align: left;
  63. height: 25px;
  64. padding: 3px 3px 3px 10px;
  65. margin: 0px;
  66. color: rgb(255, 255, 255);
  67. border: 1px solid rgb(102, 102, 153);
  68. cursor: move;
  69. background-color: rgb(102, 102, 153);
  70. .close_btn{
  71. color: #fff;
  72. font-size: 15px;
  73. cursor: pointer;
  74. float: right;
  75. margin-right: 23px;
  76. }
  77. }
  78. main{
  79. width: 100%;
  80. height: 100%;
  81. iframe{
  82. width: 100%;
  83. height: 100%;
  84. }
  85. }
  86. }
  87. </style>