Sokong kesan penunjuk tetikus seret dan seret dalam IE, firefxo dan pelayar chrome

Rumah

hujung hadapan web

tutorial js

Sokong kesan penunjuk tetikus seret dan seret dalam IE, firefxo dan pelayar chrome_Layout dan Layers

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:16 PM

seret seretan tetikus

Kod teras:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标拖动和拖拽的鼠标指针特效</title>
<style>
#box{width:100px;height:100px;background:#966;position:absolute;left:100px;top:100px;cursor:pointer;}
</style>
</head>
<body>
<div id="box"></div>
<script>
var doc=document;
function getViewport(){
  return {width:Math.max(document.documentElement.clientWidth,document.documentElement.scrollWidth),
      height:Math.max(document.documentElement.clientHeight,document.documentElement.scrollHeight)
  };
}
function compareNum(x,minNum,maxNum){
 switch(true){
 case x<minNum:x=minNum;break;
 case x>maxNum:x=maxNum;break;
 default:x;
 }
 return x;
 }

box.style.left='100px'
box.style.top='100px'

box.onmousedown=function(e){
 var e=e||window.event;
 var maxL=getViewport().width-100,
   maxT=getViewport().height-100;
 this.startL=parseInt(this.style.left);
 this.startT=parseInt(this.style.top);
 //alert(e.clientX)
 this.startX=e.clientX;
 this.startY=e.clientY;
 //alert(maxL+':'+maxT+':'+L+':'+T)
 doc.onmousemove=function(e){
 posXY(e,0,0,maxL,maxT);
 };
 doc.onmouseup=function(){
  doc.onmousemove=null;
 doc.onmouseup=null;
 };
 return false;
}
function posXY(e,minL,minT,maxL,maxT){
  var e=e||window.event;
 var x=box.startL-(box.startX-e.clientX);
 var y=box.startT-(box.startY-e.clientY);
 box.style.left=compareNum(x,minL,maxL)+'px'
 box.style.top=compareNum(y,minT,maxT)+'px'
}
</script>
</body>
</html>

Salin selepas log masuk

[Ctrl A pilih semua Nota: Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semula untuk melaksanakan

]<script> var doc=document; function getViewport(){ return {width:Math.max(document.documentElement.clientWidth,document.documentElement.scrollWidth), height:Math.max(document.documentElement.clientHeight,document.documentElement.scrollHeight) }; } function compareNum(x,minNum,maxNum){ switch(true){ case x<minNum:x=minNum;break; case x>maxNum:x=maxNum;break; default:x; } return x; } box.style.left='100px' box.style.top='100px' box.onmousedown=function(e){ var e=e||window.event; var maxL=getViewport().width-100, maxT=getViewport().height-100; this.startL=parseInt(this.style.left); this.startT=parseInt(this.style.top); //alert(e.clientX) this.startX=e.clientX; this.startY=e.clientY; //alert(maxL+':'+maxT+':'+L+':'+T) doc.onmousemove=function(e){ posXY(e,0,0,maxL,maxT); }; doc.onmouseup=function(){ doc.onmousemove=null; doc.onmouseup=null; }; return false; } function posXY(e,minL,minT,maxL,maxT){ var e=e||window.event; var x=box.startL-(box.startX-e.clientX); var y=box.startT-(box.startY-e.clientY); box.style.left=compareNum(x,minL,maxL)+'px' box.style.top=compareNum(y,minT,maxT)+'px' } </script>

Kenyataan Laman Web ini

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

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?

1 bulan yang lalu By DDD

R.E.P.O. Simpan Fail Lokasi: Di manakah & bagaimana untuk melindunginya?

1 bulan yang lalu By DDD

R.E.P.O. Tetapan grafik terbaik

2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

1 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7392

Tutorial Java

1630

Tutorial CakePHP

1357

Tutorial Laravel

1268

Tutorial PHP

1216

Tunjukkan Lagi

Related knowledge

Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi seret dan zum imej? Oct 27, 2023 am 09:39 AM

Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi seret dan zum imej? Dalam pembangunan web moden, menyeret dan mengezum imej adalah keperluan biasa. Dengan menggunakan JavaScript, kami boleh menambahkan fungsi seret dan zum pada imej dengan mudah untuk memberikan pengalaman pengguna yang lebih baik. Dalam artikel ini, kami akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi ini, dengan contoh kod khusus. Struktur HTML Pertama, kita memerlukan struktur HTML asas untuk memaparkan gambar dan menambah

Petua dan amalan terbaik untuk pemilihan seret dan lepas dan peletakan dalam Vue Jun 25, 2023 am 10:13 AM

Vue ialah rangka kerja JavaScript popular yang sesuai untuk membina aplikasi halaman tunggal (SPA). Ia menyokong pemilihan drag-and-drop dan fungsi peletakan melalui arahan dan komponen, memberikan pengguna pengalaman interaktif yang lebih baik. Artikel ini akan memperkenalkan teknik dan amalan terbaik untuk pemilihan seret dan lepas dan peletakan dalam Vue. Drag Instruction Vue menyediakan arahan v-draggable yang boleh mencapai kesan seretan dengan mudah. Perintah ini boleh digunakan pada mana-mana elemen, dan gaya seret boleh disesuaikan.

Cara menggunakan Vue untuk melaksanakan kesan pengisihan seret dan lepas Sep 20, 2023 pm 03:01 PM

Cara menggunakan Vue untuk melaksanakan kesan pengisihan seret dan lepas Vue.js ialah rangka kerja JavaScript popular yang boleh membantu kami membina aplikasi bahagian hadapan yang sangat interaktif. Dalam Vue, kami boleh melaksanakan kesan isihan seret dan lepas dengan mudah, membolehkan pengguna mengisih data dengan menyeret elemen. Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan kesan pengisihan seret dan lepas dan memberikan contoh kod khusus. Mula-mula, kita perlu mencipta contoh Vue dan menentukan tatasusunan untuk menyimpan data yang hendak diisih. Dalam contoh kita akan

Kemahiran praktikal Vue: gunakan arahan v-on untuk mengendalikan acara seret tetikus Sep 15, 2023 am 08:24 AM

Kemahiran praktikal Vue: Gunakan arahan v-on untuk mengendalikan acara seret tetikus Prakata: Vue.js ialah rangka kerja JavaScript yang popular Kesederhanaan, kemudahan penggunaan dan fleksibiliti menjadikannya pilihan pertama bagi banyak pembangun. Dalam pembangunan aplikasi Vue, pengendalian peristiwa interaksi pengguna adalah kemahiran penting. Artikel ini akan memperkenalkan cara menggunakan arahan v-on Vue untuk mengendalikan peristiwa seret tetikus dan memberikan contoh kod khusus. Buat contoh Vue: Mula-mula, perkenalkan fail perpustakaan Vue.js dalam fail HTML: &

Bagaimana untuk menyalin dan mengalihkan elemen drag-and-drop dalam Vue? Jun 25, 2023 am 08:35 AM

Vue ialah rangka kerja JavaScript popular yang menyediakan fungsi seret dan lepas yang mudah, membolehkan kami menyalin dan memindahkan elemen dengan mudah. Seterusnya, mari kita lihat cara menyalin dan mengalihkan elemen seret dan lepas dalam Vue. 1. Pelaksanaan asas elemen drag-and-drop Untuk menyalin dan mengalihkan elemen drag-and-drop dalam Vue, anda perlu melaksanakan fungsi drag-and-drop asas elemen tersebut terlebih dahulu. Kaedah pelaksanaan khusus adalah seperti berikut: Tambah elemen yang perlu diseret dalam templat: <divclass="drag-elem"

Cara menggunakan Layui untuk mencapai kesan menyeret dan mengezum imej Oct 24, 2023 am 09:16 AM

Cara menggunakan Layui untuk mencapai kesan menyeret dan mengezum imej Dalam reka bentuk web moden, kesan interaktif imej telah menjadi cara penting untuk meningkatkan daya hidup dan pengalaman pengguna halaman web. Antaranya, kesan seretan dan zum imej adalah salah satu kaedah interaksi yang biasa dan popular. Artikel ini akan memperkenalkan cara menggunakan rangka kerja Layui untuk mencapai kesan menyeret dan mengezum imej, serta memberikan contoh kod khusus. 1. Memperkenalkan rangka kerja Layui dan kebergantungan yang berkaitan: Pertama, kita perlu memperkenalkan rangka kerja Layui dan kebergantungan yang berkaitan ke dalam fail HTML. Ini boleh diperkenalkan melalui contoh kod berikut

Bagaimana untuk melaksanakan fungsi garis seret tetikus dalam JavaScript? Oct 19, 2023 am 11:51 AM

Bagaimana untuk melaksanakan fungsi garis seret tetikus dalam JavaScript? Abstrak: Fungsi garis seret tetikus adalah sangat biasa dalam banyak projek dan boleh digunakan untuk mencipta carta interaktif, melukis lakaran, dsb. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi garisan seret tetikus dan memberikan contoh kod khusus untuk membantu pembaca memahami dan menerapkannya dengan lebih baik. Pengenalan: Dalam pembangunan web, selalunya perlu untuk mencapai beberapa kesan yang sangat interaktif, dan fungsi garis seret tetikus adalah salah satu keperluan biasa. Dengan menyeret tetikus, kita

Bagaimana untuk melaksanakan fungsi pengisihan seret dan lepas dalam uniapp Jul 06, 2023 pm 12:31 PM

Cara melaksanakan fungsi isihan seret dan lepas dalam uniapp Isih seret dan lepas ialah kaedah interaksi pengguna biasa yang membolehkan pengguna menukar susunan unsur dengan menyeretnya. Dalam uniapp, kita boleh melaksanakan fungsi pengisihan seret dan lepas dengan menggunakan perpustakaan komponen dan beberapa peristiwa seret asas. Berikut akan memperkenalkan secara terperinci cara melaksanakan fungsi pengisihan seret dan lepas dalam uniapp, dengan contoh kod. Langkah 1: Buat halaman senarai asas Mula-mula, kita perlu mencipta halaman senarai asas untuk memaparkan elemen yang perlu diisih. Anda boleh menggunakan &

See all articles