js實現簡單圖片拖拽效果

本文例項為大家分享了js實現簡單圖片拖拽效果的具體程式碼，供大家參考，具體內容如下

//圖片需要自己匯入
<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>在當前顯示區範圍內實現點不到的小方塊</title>
 <style>
 div{position:fixed;width:100px;height:100px;
  background-image:url(images/xiaoxin.gif);
   background-size:100%;
 }
 </style>
 
 </head>
 <body>
 <div id="pop"></div>
 <script>
 let pop = document.getElementById("pop")
 //定義開關變數,用於控制圖片是否跟隨滑鼠移動
 let canMove = fals 
程式設計客棧e;
 //在開始拖拽時,就儲存滑鼠距div左上角的相對位置
 let offsetX,offsetY;
 //當在pop上按下滑鼠時
 pop.onmousedown=function(e){
  //可以開程式設計客棧始拖動
  canMove=true;
  offsetX=e.offsetX;
  offsetY=e.offsetY;
 }
 //當滑鼠在視窗移動時
 window.onmousemove=function(e){
  //只有當pop可以移動時
  if(canMove==http://www.cppcns.comtrue){
  //讓pop跟隨滑鼠移動
  //開始拖拽時，立刻獲得滑鼠距圖片左上角的相對位置
  //求pop的top和left
  let lehttp://www.cppcns.com 
ft=e.clientX-offsetX;
  lwww.cppcns.comet top=e.clientY-offsetY;
  //設定pop的top和left屬性
   pop.style.left=left+"px";
   pop.style.top=top+"px";
  }
 }
 //當在pop上抬起滑鼠按鍵時
 pop.onmouseup=function(){
  //停止拖拽
  canMove=false
 } 
 </script>
 </body>
</html>

效果圖：

js實現簡單圖片拖拽效果

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

js實現簡單圖片拖拽效果

js實現簡單圖片拖拽效果

js實現簡單的拖拽效果

js實現單元格拖拽效果

Vue實現簡單的拖拽效果

基於js實現的圖片拖拽排序原始碼例項

JS實現簡單圖片輪播效果

JavaScript實現簡單的拖拽效果

Vue實現開關按鈕拖拽效果

js實現限定範圍拖拽的示例

純 JS 實現放大縮小拖拽採坑之旅

JavaScript實現頁面的拖拽效果的兩種方法

原生js實現九宮格拖拽換位

JS實現簡單加減購物車效果

原生js實現簡單輪播圖效果

js實現簡單輪播圖效果

Javascript實現登入框拖拽效果

JS實現盒子拖拽效果

js實現百度登入視窗拖拽效果

如何實現js拖拽效果及原理解析

jquery實現簡單拖拽效果

js實現簡單圖片拖拽效果

相關推薦