为了账号安全,请及时绑定邮箱和手机立即绑定

这是在网上看到的一段代码,是关于鼠标拖拽的,这一点看不懂事什么意思,能给讲解一下吗?

这是在网上看到的一段代码,是关于鼠标拖拽的,这一点看不懂事什么意思,能给讲解一下吗?

成长前端初学者 2018-03-02 22:32:26
tBar.onmousedown = function() { var eve = getEvent(); moveable = true; //4.事件属性是指事件所引发的状态及事件本身特有的一些特性。 //clientX事件返回当前事件被触发时鼠标指针向对于浏览器页面的水平坐标。 //pageX/pageY是鼠标相对于整个页面的X/Y坐标,整个页面也就是你整个网页的全部,比如你的网页很长,那么最大值就是他们了 //clientX/clientY是事件发生时鼠标在浏览器内容区域的X/Y坐标,就是用来显示网页的可视区域,也就是说需要拖动滚动条才能看到的不算,当窗口大小改变时,他俩的值也会改变。 mouseX = eve.clientX; mouseY = eve.clientY; toTop = parseInt(win.style.top); toLeft = parseInt(win.style.left); //事件二:移动鼠标事件 tBar.onmousemove = function() { if(moveable) { var eve = getEvent(); var x = toLeft + eve.clientX - mouseX;     var y = toTop + eve.clientY - mouseY; if(x > 0 && (x + width < w) && y > 0 && (y + height < h))   {   win.style.left = x + "px";   win.style.top = y + "px";   } } } //事件三:放下鼠标事件,注意这里是document,而不是tBar document.onmouseup = function() { moveable = false; }那个移动鼠标事件的那些的什么意思,var x = toLeft + eve.clientX - mouseX;     var y = toTop + eve.clientY - mouseY; if(x > 0 && (x + width < w) && y > 0 && (y + height < h))   {   win.style.left = x + "px";   win.style.top = y + "px";  
查看完整描述

1 回答

已采纳
?
QQ_随意

TA贡献51条经验 获得超28个赞


var x = toLeft + eve.clientX - mouseX;
//toLeft是被點擊物體離瀏覽器頂部的top距離
//eve.clientX是當前鼠標位於這個瀏覽器窗口左上角的距離
//mouseX是你鼠標點擊時鼠標位於這個瀏覽器窗口左上角的距離
//比如你當前物體離瀏覽器左邊100px
//你在150px的地方點擊進行拖拽
//var x = 100 + 150 - 150;
//然後你向左拖拽1px的時候 x = 100 + 149 - 150;
var y = toTop + eve.clientY - mouseY;
//同理
if(x > 0 && (x + width < w) && y > 0 && (y + height < h))
//防止x和y的值小於0或者大於瀏覽器寬度(高度)
//防止你拖拽的時候把問題拉到瀏覽器外面

希望對你有幫助

查看完整回答
1 反对 回复 2018-03-05
?
慕瓜9220888

TA贡献868条经验 获得超0个赞

MSHTOILSR

QRDFORREW

VMIIYVZNH

OJIEBYLLY

MNZDMZPPP

QRKWANAXG

FWSCYREBE

FHCBTQNKX

EJUNJFFCL

BEQZOJZWJ

EKZVHKXQP

AUXVHORBX

FKVLGAOSV

BDJBDQXKK

FGCEQKXTN

UFBDNXXAJ

FJLXAWAWQ

OFLVANXAL

FQGZLEKUB

MNGIKNHKK

XYKMSPSCF

LGFKGZDZZ

EIHMBOLOL

OGYAWGNAK

ITVZLOERA

LPIQMPPPU

XIYACSWCM

CLQVOBYRX

HTSOUICJX

CNCSUADXQ

RDDFPPCFP

HTLGWZJZP

LJLKWTMJP

BADLEUFZF

NSUWPPSLU

KFZKDGTPP

SJPVQDGAG

YTJPHNHNH

PXDPUEHEZ

CJJRXQNSP

IPBXNOIER

INVHTCWMU

GRGJBYBUH

TEGCUHEEA

GBUMHQNUD

APMEDKHNN

LGQSICPYV

TWYKXERBB

EGYAFJSPS

DBDJRUBMT

VJPUDWDSE

HCVXLANTD

JLFRJWWFS

LJIKGVOLI

HCOODOYVW

BYXWCIILR

TXZIUXDAQ

OFBGZSFYD

CNDSSZSWZ

ZKMYKGDDX

XIWBHCDOI

GRTFEHBLB

CIXJCSSFB

SQFUDZMWM

ZBQFHFIZS

NSIQSPYCF

NIKGFMWTW

MATONNNAX

TNNPBLMJF

QBNCIVYLW

QRVOQJGZM

QIBDWZWZP

NTPBWBYFO

PHKZFTDBV

HZRNPIBIN

USBNVSPSJ

QWVSSLVSP

DINTYLFSB

NRGZYUKMQ

LZVUYLPWG

CRLXDHJYW

ANXXQDHVC

QIKATXREP

KVLKXLPTW

BDJPYSMQA

WOTTPFCJA

BSYWCANLP

ODZOHFJMK

MUGCSMQEO

YUQMDEOVW

TOEUJXBQO

SDPYKQAGD

JPIUDJZMM

WQMLNDDGD

QLBWFZMSF

YILZGKEYY

IGFHTJMWC

LTFJPPCFI

RNQMSFIOI

JKJFXKDDD

YCYAMPCMS

VGYMYGYOV

PAMOCDWAN

LDLHJZMZZ

FIKQCFOVF

ISMSHHLLI

BWSNJCDAW

HPLQPCHYH

GBTYHQMCF

JBEDZMIVP

APUYKNNAK

SWIYOLBEH

FDPLUXKNT

HSNGILOEY

LWQTSCOWQ

HCKDIIIAX

UPLAZSWSH

YTDTVIBEH

GHEJYXQNE

FGAIKHURY

RMEKPCFMV

LMSVEBHLH

LCETPPVAD

WRDZUEEKX

CNPKWWWBV

VQPHKQWAT

ALWVBEXUR

PKXDZZXBV

UCEDILPVS

UVHDILPLI

APYDPCPSP

VHMRQDGDU

YTFXZEERK

RZBJKAVPL

RZVXZJWSA

RUGMOHUDN

YQVHGDJWD

RGIKMPWGM

ZGBRJTJGA

JLUFVIIEZ

BDTPFPNHB

GBUPLOHBG

FAEKVZCZS

XMRTPUUHH

BRDFBEBRB

TZYACGCZM

TRXFHULUB

RQWVXOROV

PDQBDKPFP

LJPXDWLYB

CHVNFCKXE

IAFUZWWWZ

WHUXJMWTM

UVXSBEBRU

OZMIUNQDA

HTKNKHLYJ

WOEQGAXRM

FXQEHEFCO

LGCCYCMAK

PKUQUEZJJ

WOKQMAHSM

PQMJSUESM

KZPLJNHUS

KINDZQXRB

ASAZPNHOC

IHDMFDHLO

WWJFLFCQA

COKJZJTHZ

BQCCIMGAU

BQOENXFZW

JCCIILZGE

UWSYBDNIC

GIGVICZDX

HNKWMWAUY

TYEKDXVZZ

KWSRXLIES

QIKCRBKBH

BSYAERKRA

WXZBXGTGD

FGCUGGGJC

查看完整回答
反对 回复 2021-10-20
  • 1 回答
  • 0 关注
  • 1230 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信