Contoh kesan seretan tetikus mudah menggunakan kemahiran javascript

Contoh kesan seretan tetikus mudah menggunakan kemahiran javascript_javascript

WBOY

Lepaskan： 2016-05-16 16:05:03

asal

1199 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara melaksanakan kesan seretan tetikus mudah menggunakan JavaScript. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Adalah perkara biasa untuk menyeret elemen dengan tetikus dan meletakkannya di mana-mana pada halaman web Contohnya, banyak bahagian templat blog boleh diseret ke kedudukan yang sepadan dengan sendirinya.

Mari kita tulis yang ringkas yang boleh mencapai kesan seretan tetikus.

Apabila tetikus ditekan, rekodkan perbezaan antara kedudukan semasa tetikus dan jarak kiri elemen.
Apabila tetikus bergerak, nilai diberikan kepada kedudukan elemen, iaitu kedudukan tetikus, tolak perbezaan tadi.
Apabila tetikus dilepaskan, tetapkan null pada pergerakan tetikus dan pelepasan tetikus, supaya mereka tidak akan mengambil tindakan selanjutnya.

Mata 1:

disx = oevent.clientX - box.offsetLeft;

Salin selepas log masuk

Untuk menentukan kedudukan titik tetikus pada elemen semasa menyeret, ia ialah kedudukan tetikus tolak jarak kiri elemen.

Mata 2:

box.style.left = oevent.clientX - disx + "px";

Salin selepas log masuk

Kedudukan elemen semasa menyeret, kedudukan semasa tetikus tolak nilai yang baru dikira sebelum ini.

Baiklah, ini kodnya:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body{margin:0; padding:0; height:1500px;}
#box{width:100px; height:100px; background:#06c; position:absolute;}
</style>
<script>
window.onload = function(){
 var box = document.getElementById("box");
 var disx =0;
 var disy = 0;
 box.onmousedown = function(evt){
 var oevent = evt || window.event;
 disx = oevent.clientX - box.offsetLeft;
 disy = oevent.clientY - box.offsetTop;
 document.onmousemove = function(evt){
  var oevent = evt || window.event;
  box.style.left = oevent.clientX - disx + "px";
  box.style.top = oevent.clientY - disy + "px";
 }
 document.onmouseup = function(){
  document.onmousemove = null;
  document.onmouseup = null;
 }
 return false;
 }
}
</script>
</head>
<body>
<h1>鼠标拖动</h1>
<div id="box"></div>
</body>
</html>

Salin selepas log masuk

Saya ingin memperbaikinya sekali lagi. Tiada had untuk julat seret tetikus di atas, dan kadangkala tetingkap seret tidak dapat dilihat di luar. Mari hadkan skop

Mata 1: Seperti berikut, jika kedudukan kiri elemen kurang daripada 0, tetapkan ia nilai 0. Jika ia lebih besar daripada saiz tetingkap visual tolak lebar elemen itu sendiri, tetapkan ia perbezaan antara saiz tetingkap visual tolak lebar elemen itu sendiri.

var boxl = oevent.clientX - disx;
if(boxl < 0){
  boxl =0;
  }else if(boxl > vieww - box.offsetWidth){
  boxl = vieww - box.offsetWidth;
  }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body{margin:0; padding:0;}
#box{width:100px;
height:100px;
background:#06c;
position:absolute;
}
</style>
<script>
window.onload = function(){
 var box = document.getElementById("box");
 var disx =0;
 var disy = 0;
 box.onmousedown = function(evt){
 var oevent = evt || window.event;
 disx = oevent.clientX - box.offsetLeft;
 disy = oevent.clientY - box.offsetTop;
 document.onmousemove = function(evt){
  var oevent = evt || window.event;
  var boxl = oevent.clientX - disx;
  var boxt = oevent.clientY - disy
  var vieww = document.documentElement.clientWidth || document.body.clientWidth;
  var viewh = document.documentElement.clientHeight || document.body.clientHeight;
  if(boxl < 0){
  boxl =0;
  }else if(boxl > vieww - box.offsetWidth){
  boxl = vieww - box.offsetWidth;
  }
  if(boxt < 0){
  boxt =0;
  }else if(boxt > viewh - box.offsetHeight){
  boxt = viewh- box.offsetHeight;
  }
  box.style.left = boxl + "px";
  box.style.top = boxt + "px";
 }
 document.onmouseup = function(){
  document.onmousemove = null;
  document.onmouseup = null;
 }
 return false;
 }
}
</script>
</head>
<body>
<h1>鼠标拖动</h1>
<div id="box"></div>
</body>
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.