Rumah >hujung hadapan web >tutorial js >Contoh kesan seretan tetikus mudah menggunakan kemahiran javascript_javascript

Contoh kesan seretan tetikus mudah menggunakan kemahiran javascript_javascript

WBOYasal: 2016-05-16 16:05:031255semak imbas

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;

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";

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>

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>

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

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Berkongsi petua tentang && dan || dalam petua javascript_javascriptArtikel seterusnya：Berkongsi petua tentang && dan || dalam petua javascript_javascript

Artikel berkaitan

Lihat lagi