高德地图使用demo || H5的div拖动

官网api文档: 快速上手-入门-教程-地图 JS API | 高德地图API

<!document html>
 
<html>
<head>
<script>
window.onLoad  = function(){
         var map = new AMap.Map('container', {
        center: [116.397428, 39.90923],
        layers: [//使用多个图层
            new AMap.TileLayer.Satellite(),
            new AMap.TileLayer.RoadNet()
        ],
        zooms: [4,18],//设置地图级别范围
        zoom: 13
    });
  }
  var url = 'https://webapi.amap.com/maps?v=2.0&key=****&callback=onLoad';
  var jsapi = document.createElement('script');
  jsapi.charset = 'utf-8';
  jsapi.src = url;
  document.head.appendChild(jsapi);
 
</script>
<style>
#container {width:1024px; height: 500px; }  
</style>
</head>
 
<body>
	<div id="container"></div> 
</body>
 
</html>

H5的draggable属性,拖动元素

<!document html>

<html>
<head>
   <style>
   #container {width:1024px; height: 760px; }
   #overContainer{width: 350px;
       height: 60px;
       position: absolute;
       left: 10;
       top: 10px;
       background: gray; }
   .myUl{
       list-style-type:none;
       margin-left: -30px;
   }
   .myInline{
       display: inline-block;
   }
   .myUl li{
       color:green;
       display: inline-block;
       border: 1px red solid;
   }
   .myUl li:hover{
       cursor:pointer;
   }
   .inputStyle1{
       width:80px;
       border: none;
   }
   </style>
</head>

<body>
   <div id="container"></div>
   <div id="overContainer" draggable="true">
       <ul class="myUl">
           <li οnclick="getCircle()">圆形</li>
           <li οnclick="getCircle()">矩形</li>
           <li οnclick="getCircle()">多边形</li>
           <li οnclick="getCircle()">清除</li>
           <li οnclick="getCircle()" style="margin-left: 30px"><span style="color: black;">搜索: </span><input type="text" id="searchWhere" οninput="searchWhere(this)" placeholder="地名" class="inputStyle1"/></li>
       </ul>

   <div>
</body>

<script>
//   let box = document.getElementById('overContainer');
// box.addEventListener('dragstart', (e) => {
// console.log('拖动开始');
// })
// box.addEventListener('drag', (e) => {
// console.log('拖动中');
// })
// box.addEventListener('dragend', (e) => {
// console.log('拖动结束');
// })
let box = document.querySelector('#overContainer');
// 用于保存鼠标在节点中的位置
let initX = null,
initY = null;
box.addEventListener('dragstart', (e) => {
   // 在开始拖拽,保存鼠标在节点中的位置
initX = e.offsetX;
initY = e.offsetY;
})
box.addEventListener('drag', (e) => {
   // 拖拽过程中,如果不减去鼠标在节点中的位置,会出现 div 的左上角与鼠标位置重合
   // 中间会有 "闪现" 的效果
let _left = e.clientX - initX
let _top = e.clientY - initY

box.style.left = _left + 'px';
box.style.top = _top + 'px';
// 这个过程结束后,e.clientX和e.clientY都会变成0
// 就会导致 left 和 top 的值变为负值
})
box.addEventListener('dragend', (e) => {
   // 所以结束的时候也要设置位置,
   // 不然盒子会闪现到左上角
let _left = e.clientX - initX
let _top = e.clientY - initY

box.style.left = _left + 'px';
box.style.top = _top + 'px';
})

</script>
</html>

高德地图使用demo || H5的div拖动

猜你喜欢