wsemi
Version:
A support package for web developer.
405 lines (320 loc) • 41.7 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>domDragBarAndScroll.mjs - Documentation</title>
<script src="scripts/prettify/prettify.js"></script>
<script src="scripts/prettify/lang-css.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
<script src="scripts/nav.js" defer></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
<div class="navicon"></div>
</label>
<label for="nav-trigger" class="overlay"></label>
<nav >
<h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="wsemi.html">wsemi</a><ul class='methods'><li data-type='method'><a href="wsemi.html#.ab2blob">ab2blob</a></li><li data-type='method'><a href="wsemi.html#.ab2u8arr">ab2u8arr</a></li><li data-type='method'><a href="wsemi.html#.addExcelWorksheetFromData">addExcelWorksheetFromData</a></li><li data-type='method'><a href="wsemi.html#.addMonth">addMonth</a></li><li data-type='method'><a href="wsemi.html#.aes2str">aes2str</a></li><li data-type='method'><a href="wsemi.html#.alive">alive</a></li><li data-type='method'><a href="wsemi.html#.arr2dt">arr2dt</a></li><li data-type='method'><a href="wsemi.html#.arrAccum">arrAccum</a></li><li data-type='method'><a href="wsemi.html#.arrAdd">arrAdd</a></li><li data-type='method'><a href="wsemi.html#.arrAt">arrAt</a></li><li data-type='method'><a href="wsemi.html#.arrDiff">arrDiff</a></li><li data-type='method'><a href="wsemi.html#.arrFilterByKeywords">arrFilterByKeywords</a></li><li data-type='method'><a href="wsemi.html#.arrFilterByNum">arrFilterByNum</a></li><li data-type='method'><a href="wsemi.html#.arrFilterByPnum">arrFilterByPnum</a></li><li data-type='method'><a href="wsemi.html#.arrFilterByPnumAndToLog">arrFilterByPnumAndToLog</a></li><li data-type='method'><a href="wsemi.html#.arrFind">arrFind</a></li><li data-type='method'><a href="wsemi.html#.arrGroupByMaxmin">arrGroupByMaxmin</a></li><li data-type='method'><a href="wsemi.html#.arrHas">arrHas</a></li><li data-type='method'><a href="wsemi.html#.arrInsert">arrInsert</a></li><li data-type='method'><a href="wsemi.html#.arrLookupByMaxmin">arrLookupByMaxmin</a></li><li data-type='method'><a href="wsemi.html#.arrMax">arrMax</a></li><li data-type='method'><a href="wsemi.html#.arrMin">arrMin</a></li><li data-type='method'><a href="wsemi.html#.arrMulti">arrMulti</a></li><li data-type='method'><a href="wsemi.html#.arrNorm">arrNorm</a></li><li data-type='method'><a href="wsemi.html#.arrProduct">arrProduct</a></li><li data-type='method'><a href="wsemi.html#.arrReduce">arrReduce</a></li><li data-type='method'><a href="wsemi.html#.arrSep">arrSep</a></li><li data-type='method'><a href="wsemi.html#.arrSort">arrSort</a></li><li data-type='method'><a href="wsemi.html#.asind">asind</a></li><li data-type='method'><a href="wsemi.html#.atan2d">atan2d</a></li><li data-type='method'><a href="wsemi.html#.atand">atand</a></li><li data-type='method'><a href="wsemi.html#.attstr">attstr</a></li><li data-type='method'><a href="wsemi.html#.b642obj">b642obj</a></li><li data-type='method'><a href="wsemi.html#.b642str">b642str</a></li><li data-type='method'><a href="wsemi.html#.b642u16arr">b642u16arr</a></li><li data-type='method'><a href="wsemi.html#.b642u8arr">b642u8arr</a></li><li data-type='method'><a href="wsemi.html#.binstr">binstr</a></li><li data-type='method'><a href="wsemi.html#.blob2ab">blob2ab</a></li><li data-type='method'><a href="wsemi.html#.blob2b64">blob2b64</a></li><li data-type='method'><a href="wsemi.html#.blob2str">blob2str</a></li><li data-type='method'><a href="wsemi.html#.blob2u8arr">blob2u8arr</a></li><li data-type='method'><a href="wsemi.html#.blobs2b64s">blobs2b64s</a></li><li data-type='method'><a href="wsemi.html#.blobs2u8arrs">blobs2u8arrs</a></li><li data-type='method'><a href="wsemi.html#.bodyLog">bodyLog</a></li><li data-type='method'><a href="wsemi.html#.browserView">browserView</a></li><li data-type='method'><a href="wsemi.html#.browserViewFromBlob">browserViewFromBlob</a></li><li data-type='method'><a href="wsemi.html#.browserViewFromText">browserViewFromText</a></li><li data-type='method'><a href="wsemi.html#.browserViewFromU8arr">browserViewFromU8arr</a></li><li data-type='method'><a href="wsemi.html#.bs2u8arr">bs2u8arr</a></li><li data-type='method'><a href="wsemi.html#.bufRead">bufRead</a></li><li data-type='method'><a href="wsemi.html#.bufReadDbl">bufReadDbl</a></li><li data-type='method'><a href="wsemi.html#.bufWrite">bufWrite</a></li><li data-type='method'><a href="wsemi.html#.bufWriteDbl">bufWriteDbl</a></li><li data-type='method'><a href="wsemi.html#.cache">cache</a></li><li data-type='method'><a href="wsemi.html#.cbol">cbol</a></li><li data-type='method'><a href="wsemi.html#.cdbl">cdbl</a></li><li data-type='method'><a href="wsemi.html#.cfilesize">cfilesize</a></li><li data-type='method'><a href="wsemi.html#.cfinancial">cfinancial</a></li><li data-type='method'><a href="wsemi.html#.cint">cint</a></li><li data-type='method'><a href="wsemi.html#.clearXSS">clearXSS</a></li><li data-type='method'><a href="wsemi.html#.color">color</a></li><li data-type='method'><a href="wsemi.html#.composeToTree">composeToTree</a></li><li data-type='method'><a href="wsemi.html#.convertToTree">convertToTree</a></li><li data-type='method'><a href="wsemi.html#.copyStrToClipboard">copyStrToClipboard</a></li><li data-type='method'><a href="wsemi.html#.cosd">cosd</a></li><li data-type='method'><a href="wsemi.html#.cotd">cotd</a></li><li data-type='method'><a href="wsemi.html#.createExcelWorkbook">createExcelWorkbook</a></li><li data-type='method'><a href="wsemi.html#.cscd">cscd</a></li><li data-type='method'><a href="wsemi.html#.cstr">cstr</a></li><li data-type='method'><a href="wsemi.html#.day2cht">day2cht</a></li><li data-type='method'><a href="wsemi.html#.debounce">debounce</a></li><li data-type='method'><a href="wsemi.html#.delay">delay</a></li><li data-type='method'><a href="wsemi.html#.dig">dig</a></li><li data-type='method'><a href="wsemi.html#.digExp">digExp</a></li><li data-type='method'><a href="wsemi.html#.domAlert">domAlert</a></li><li data-type='method'><a href="wsemi.html#.domAppend">domAppend</a></li><li data-type='method'><a href="wsemi.html#.domCancelEvent">domCancelEvent</a></li><li data-type='method'><a href="wsemi.html#.domCompareText">domCompareText</a></li><li data-type='method'><a href="wsemi.html#.domCompareTextDyn">domCompareTextDyn</a></li><li data-type='method'><a href="wsemi.html#.domConvertToPic">domConvertToPic</a></li><li data-type='method'><a href="wsemi.html#.domConvertToPicDyn">domConvertToPicDyn</a></li><li data-type='method'><a href="wsemi.html#.domDetect">domDetect</a></li><li data-type='method'><a href="wsemi.html#.domDrag">domDrag</a></li><li data-type='method'><a href="wsemi.html#.domDragBarAndScroll">domDragBarAndScroll</a></li><li data-type='method'><a href="wsemi.html#.domDragPreview">domDragPreview</a></li><li data-type='method'><a href="wsemi.html#.domDropFiles">domDropFiles</a></li><li data-type='method'><a href="wsemi.html#.domElementsFromPoint">domElementsFromPoint</a></li><li data-type='method'><a href="wsemi.html#.domFadeIn">domFadeIn</a></li><li data-type='method'><a href="wsemi.html#.domFadeOut">domFadeOut</a></li><li data-type='method'><a href="wsemi.html#.domFind">domFind</a></li><li data-type='method'><a href="wsemi.html#.domFinds">domFinds</a></li><li data-type='method'><a href="wsemi.html#.domGetAttr">domGetAttr</a></li><li data-type='method'><a href="wsemi.html#.domGetBoudRect">domGetBoudRect</a></li><li data-type='method'><a href="wsemi.html#.domGetBoudRectRefSelf">domGetBoudRectRefSelf</a></li><li data-type='method'><a href="wsemi.html#.domGetFileAccept">domGetFileAccept</a></li><li data-type='method'><a href="wsemi.html#.domGetFiles">domGetFiles</a></li><li data-type='method'><a href="wsemi.html#.domGetParents">domGetParents</a></li><li data-type='method'><a href="wsemi.html#.domGetPointFromEvent">domGetPointFromEvent</a></li><li data-type='method'><a href="wsemi.html#.domGetScrollableParent">domGetScrollableParent</a></li><li data-type='method'><a href="wsemi.html#.domGetWindowSize">domGetWindowSize</a></li><li data-type='method'><a href="wsemi.html#.domIsClientXYIn">domIsClientXYIn</a></li><li data-type='method'><a href="wsemi.html#.domIsFocused">domIsFocused</a></li><li data-type='method'><a href="wsemi.html#.domIsVisible">domIsVisible</a></li><li data-type='method'><a href="wsemi.html#.domPrepend">domPrepend</a></li><li data-type='method'><a href="wsemi.html#.domRemove">domRemove</a></li><li data-type='method'><a href="wsemi.html#.domRenderMarkdownMind">domRenderMarkdownMind</a></li><li data-type='method'><a href="wsemi.html#.domRenderMarkdownMindDyn">domRenderMarkdownMindDyn</a></li><li data-type='method'><a href="wsemi.html#.domRipple">domRipple</a></li><li data-type='method'><a href="wsemi.html#.domScrollIntoView">domScrollIntoView</a></li><li data-type='method'><a href="wsemi.html#.domScrollTo">domScrollTo</a></li><li data-type='method'><a href="wsemi.html#.domShowImages">domShowImages</a></li><li data-type='method'><a href="wsemi.html#.domShowImagesDyn">domShowImagesDyn</a></li><li data-type='method'><a href="wsemi.html#.domShowInputAndGetFiles">domShowInputAndGetFiles</a></li><li data-type='method'><a href="wsemi.html#.domShowInputAndGetFilesU8Arrs">domShowInputAndGetFilesU8Arrs</a></li><li data-type='method'><a href="wsemi.html#.domTooltip">domTooltip</a></li><li data-type='method'><a href="wsemi.html#.domTriggerEvent">domTriggerEvent</a></li><li data-type='method'><a href="wsemi.html#.domVirtualCreate">domVirtualCreate</a></li><li data-type='method'><a href="wsemi.html#.domVirtualCreateQueue">domVirtualCreateQueue</a></li><li data-type='method'><a href="wsemi.html#.downloadExcelFileFromData">downloadExcelFileFromData</a></li><li data-type='method'><a href="wsemi.html#.downloadExcelFileFromDataDyn">downloadExcelFileFromDataDyn</a></li><li data-type='method'><a href="wsemi.html#.downloadFileFromB64">downloadFileFromB64</a></li><li data-type='method'><a href="wsemi.html#.downloadFileFromBlob">downloadFileFromBlob</a></li><li data-type='method'><a href="wsemi.html#.downloadFileFromText">downloadFileFromText</a></li><li data-type='method'><a href="wsemi.html#.downloadFileFromU8Arr">downloadFileFromU8Arr</a></li><li data-type='method'><a href="wsemi.html#.dtmapping">dtmapping</a></li><li data-type='method'><a href="wsemi.html#.dtpick">dtpick</a></li><li data-type='method'><a href="wsemi.html#.evem">evem</a></li><li data-type='method'><a href="wsemi.html#.execProcess">execProcess</a></li><li data-type='method'><a href="wsemi.html#.execScript">execScript</a></li><li data-type='method'><a href="wsemi.html#.f2c">f2c</a></li><li data-type='method'><a href="wsemi.html#.filepathToTree">filepathToTree</a></li><li data-type='method'><a href="wsemi.html#.files2data">files2data</a></li><li data-type='method'><a href="wsemi.html#.flattenToConn">flattenToConn</a></li><li data-type='method'><a href="wsemi.html#.flattenTree">flattenTree</a></li><li data-type='method'><a href="wsemi.html#.fsCleanFolder">fsCleanFolder</a></li><li data-type='method'><a href="wsemi.html#.fsCopyFolder">fsCopyFolder</a></li><li data-type='method'><a href="wsemi.html#.fsCreateFile">fsCreateFile</a></li><li data-type='method'><a href="wsemi.html#.fsCreateFolder">fsCreateFolder</a></li><li data-type='method'><a href="wsemi.html#.fsDeleteFile">fsDeleteFile</a></li><li data-type='method'><a href="wsemi.html#.fsDeleteFolder">fsDeleteFolder</a></li><li data-type='method'><a href="wsemi.html#.fsEvem">fsEvem</a></li><li data-type='method'><a href="wsemi.html#.fsGetFilesInFolder">fsGetFilesInFolder</a></li><li data-type='method'><a href="wsemi.html#.fsGetFoldersInFolder">fsGetFoldersInFolder</a></li><li data-type='method'><a href="wsemi.html#.fsIsFile">fsIsFile</a></li><li data-type='method'><a href="wsemi.html#.fsIsFolder">fsIsFolder</a></li><li data-type='method'><a href="wsemi.html#.fsReadText">fsReadText</a></li><li data-type='method'><a href="wsemi.html#.fsRenameFile">fsRenameFile</a></li><li data-type='method'><a href="wsemi.html#.fsRenameFolder">fsRenameFolder</a></li><li data-type='method'><a href="wsemi.html#.fsTreeFolder">fsTreeFolder</a></li><li data-type='method'><a href="wsemi.html#.fsWatchFile">fsWatchFile</a></li><li data-type='method'><a href="wsemi.html#.fsWriteText">fsWriteText</a></li><li data-type='method'><a href="wsemi.html#.genGradientColor">genGradientColor</a></li><li data-type='method'><a href="wsemi.html#.genID">genID</a></li><li data-type='method'><a href="wsemi.html#.genPm">genPm</a></li><li data-type='method'><a href="wsemi.html#.getBufferSize">getBufferSize</a></li><li data-type='method'><a href="wsemi.html#.getClearPathName">getClearPathName</a></li><li data-type='method'><a href="wsemi.html#.getCsvStrFromData">getCsvStrFromData</a></li><li data-type='method'><a href="wsemi.html#.getDataFromExcelFileU8Arr">getDataFromExcelFileU8Arr</a></li><li data-type='method'><a href="wsemi.html#.getDataFromExcelFileU8ArrDyn">getDataFromExcelFileU8ArrDyn</a></li><li data-type='method'><a href="wsemi.html#.getDirName">getDirName</a></li><li data-type='method'><a href="wsemi.html#.getEnv">getEnv</a></li><li data-type='method'><a href="wsemi.html#.getExcelU8ArrFromData">getExcelU8ArrFromData</a></li><li data-type='method'><a href="wsemi.html#.getExcelU8ArrFromWorkbook">getExcelU8ArrFromWorkbook</a></li><li data-type='method'><a href="wsemi.html#.getExcelWorkbookFromData">getExcelWorkbookFromData</a></li><li data-type='method'><a href="wsemi.html#.getExcelWorkbookFromWorksheet">getExcelWorkbookFromWorksheet</a></li><li data-type='method'><a href="wsemi.html#.getExcelWorksheetFromData">getExcelWorksheetFromData</a></li><li data-type='method'><a href="wsemi.html#.getFileAccept">getFileAccept</a></li><li data-type='method'><a href="wsemi.html#.getFileName">getFileName</a></li><li data-type='method'><a href="wsemi.html#.getFileTrueName">getFileTrueName</a></li><li data-type='method'><a href="wsemi.html#.getGlobal">getGlobal</a></li><li data-type='method'><a href="wsemi.html#.getObjSize">getObjSize</a></li><li data-type='method'><a href="wsemi.html#.getTimeBetween">getTimeBetween</a></li><li data-type='method'><a href="wsemi.html#.getTimeFromUnit">getTimeFromUnit</a></li><li data-type='method'><a href="wsemi.html#.getTimeObject">getTimeObject</a></li><li data-type='method'><a href="wsemi.html#.getTimeRange">getTimeRange</a></li><li data-type='method'><a href="wsemi.html#.getUserAgent">getUserAgent</a></li><li data-type='method'><a href="wsemi.html#.getUserAgentDyn">getUserAgentDyn</a></li><li data-type='method'><a href="wsemi.html#.getltdtkeys">getltdtkeys</a></li><li data-type='method'><a href="wsemi.html#.haskey">haskey</a></li><li data-type='method'><a href="wsemi.html#.html2pic">html2pic</a></li><li data-type='method'><a href="wsemi.html#.html2picDyn">html2picDyn</a></li><li data-type='method'><a href="wsemi.html#.html2str">html2str</a></li><li data-type='method'><a href="wsemi.html#.html2strDyn">html2strDyn</a></li><li data-type='method'><a href="wsemi.html#.htmlDecode">htmlDecode</a></li><li data-type='method'><a href="wsemi.html#.htmlEncode">htmlEncode</a></li><li data-type='method'><a href="wsemi.html#.importResources">importResources</a></li><li data-type='method'><a href="wsemi.html#.interp1">interp1</a></li><li data-type='method'><a href="wsemi.html#.isDev">isDev</a></li><li data-type='method'><a href="wsemi.html#.isEle">isEle</a></li><li data-type='method'><a href="wsemi.html#.isEleExistByID">isEleExistByID</a></li><li data-type='method'><a href="wsemi.html#.isEmail">isEmail</a></li><li data-type='method'><a href="wsemi.html#.isIE">isIE</a></li><li data-type='method'><a href="wsemi.html#.isNarrow">isNarrow</a></li><li data-type='method'><a href="wsemi.html#.isStrHasCapital">isStrHasCapital</a></li><li data-type='method'><a href="wsemi.html#.isStrHasLowerCase">isStrHasLowerCase</a></li><li data-type='method'><a href="wsemi.html#.isStrHasNumber">isStrHasNumber</a></li><li data-type='method'><a href="wsemi.html#.isUserIdentify">isUserIdentify</a></li><li data-type='method'><a href="wsemi.html#.isUserName">isUserName</a></li><li data-type='method'><a href="wsemi.html#.isUserPW">isUserPW</a></li><li data-type='method'><a href="wsemi.html#.isWindow">isWindow</a></li><li data-type='method'><a href="wsemi.html#.isab">isab</a></li><li data-type='method'><a href="wsemi.html#.isarr">isarr</a></li><li data-type='method'><a href="wsemi.html#.isarr0">isarr0</a></li><li data-type='method'><a href="wsemi.html#.isblob">isblob</a></li><li data-type='method'><a href="wsemi.html#.isbol">isbol</a></li><li data-type='method'><a href="wsemi.html#.isday">isday</a></li><li data-type='method'><a href="wsemi.html#.isearr">isearr</a></li><li data-type='method'><a href="wsemi.html#.iseobj">iseobj</a></li><li data-type='method'><a href="wsemi.html#.iser">iser</a></li><li data-type='method'><a href="wsemi.html#.isernot">isernot</a></li><li data-type='method'><a href="wsemi.html#.isestr">isestr</a></li><li data-type='method'><a href="wsemi.html#.isfun">isfun</a></li><li data-type='method'><a href="wsemi.html#.isint">isint</a></li><li data-type='method'><a href="wsemi.html#.ismonth">ismonth</a></li><li data-type='method'><a href="wsemi.html#.isn0int">isn0int</a></li><li data-type='method'><a href="wsemi.html#.isn0num">isn0num</a></li><li data-type='method'><a href="wsemi.html#.isnbr">isnbr</a></li><li data-type='method'><a href="wsemi.html#.isnint">isnint</a></li><li data-type='method'><a href="wsemi.html#.isnnum">isnnum</a></li><li data-type='method'><a href="wsemi.html#.isnull">isnull</a></li><li data-type='method'><a href="wsemi.html#.isnum">isnum</a></li><li data-type='method'><a href="wsemi.html#.isobj">isobj</a></li><li data-type='method'><a href="wsemi.html#.isobj0">isobj0</a></li><li data-type='method'><a href="wsemi.html#.isp0int">isp0int</a></li><li data-type='method'><a href="wsemi.html#.isp0num">isp0num</a></li><li data-type='method'><a href="wsemi.html#.ispint">ispint</a></li><li data-type='method'><a href="wsemi.html#.ispm">ispm</a></li><li data-type='method'><a href="wsemi.html#.ispnum">ispnum</a></li><li data-type='method'><a href="wsemi.html#.isstr">isstr</a></li><li data-type='method'><a href="wsemi.html#.isstr0">isstr0</a></li><li data-type='method'><a href="wsemi.html#.istime">istime</a></li><li data-type='method'><a href="wsemi.html#.istimeTZ">istimeTZ</a></li><li data-type='method'><a href="wsemi.html#.istimems">istimems</a></li><li data-type='method'><a href="wsemi.html#.istimemsTZ">istimemsTZ</a></li><li data-type='method'><a href="wsemi.html#.isu16arr">isu16arr</a></li><li data-type='method'><a href="wsemi.html#.isu8arr">isu8arr</a></li><li data-type='method'><a href="wsemi.html#.isundefined">isundefined</a></li><li data-type='method'><a href="wsemi.html#.j2o">j2o</a></li><li data-type='method'><a href="wsemi.html#.keysmat2ltdt">keysmat2ltdt</a></li><li data-type='method'><a href="wsemi.html#.log">log</a></li><li data-type='method'><a href="wsemi.html#.ltdt2vrtsable">ltdt2vrtsable</a></li><li data-type='method'><a href="wsemi.html#.ltdtDiff">ltdtDiff</a></li><li data-type='method'><a href="wsemi.html#.ltdtDiffByKey">ltdtDiffByKey</a></li><li data-type='method'><a href="wsemi.html#.ltdtkeys2mat">ltdtkeys2mat</a></li><li data-type='method'><a href="wsemi.html#.ltdtkeysheads2mat">ltdtkeysheads2mat</a></li><li data-type='method'><a href="wsemi.html#.ltdtmapping">ltdtmapping</a></li><li data-type='method'><a href="wsemi.html#.ltdtmerge">ltdtmerge</a></li><li data-type='method'><a href="wsemi.html#.ltdtpick">ltdtpick</a></li><li data-type='method'><a href="wsemi.html#.ltdtpull">ltdtpull</a></li><li data-type='method'><a href="wsemi.html#.mat2ltdt">mat2ltdt</a></li><li data-type='method'><a href="wsemi.html#.matConcat">matConcat</a></li><li data-type='method'><a href="wsemi.html#.matDiff">matDiff</a></li><li data-type='method'><a href="wsemi.html#.matat">matat</a></li><li data-type='method'><a href="wsemi.html#.now2str">now2str</a></li><li data-type='method'><a href="wsemi.html#.now2strp">now2strp</a></li><li data-type='method'><a href="wsemi.html#.nowDay2str">nowDay2str</a></li><li data-type='method'><a href="wsemi.html#.nowms2str">nowms2str</a></li><li data-type='method'><a href="wsemi.html#.nowms2strp">nowms2strp</a></li><li data-type='method'><a href="wsemi.html#.o2j">o2j</a></li><li data-type='method'><a href="wsemi.html#.obj2b64">obj2b64</a></li><li data-type='method'><a href="wsemi.html#.obj2pb64">obj2pb64</a></li><li data-type='method'><a href="wsemi.html#.obj2str">obj2str</a></li><li data-type='method'><a href="wsemi.html#.obj2stru8arr">obj2stru8arr</a></li><li data-type='method'><a href="wsemi.html#.obj2u8arr">obj2u8arr</a></li><li data-type='method'><a href="wsemi.html#.objSortBy">objSortBy</a></li><li data-type='method'><a href="wsemi.html#.objSortByKeys">objSortByKeys</a></li><li data-type='method'><a href="wsemi.html#.ocr">ocr</a></li><li data-type='method'><a href="wsemi.html#.ocrDyn">ocrDyn</a></li><li data-type='method'><a href="wsemi.html#.oo">oo</a></li><li data-type='method'><a href="wsemi.html#.openLink">openLink</a></li><li data-type='method'><a href="wsemi.html#.pb642obj">pb642obj</a></li><li data-type='method'><a href="wsemi.html#.pmChain">pmChain</a></li><li data-type='method'><a href="wsemi.html#.pmConvertResolve">pmConvertResolve</a></li><li data-type='method'><a href="wsemi.html#.pmHook">pmHook</a></li><li data-type='method'><a href="wsemi.html#.pmHookReject">pmHookReject</a></li><li data-type='method'><a href="wsemi.html#.pmIni">pmIni</a></li><li data-type='method'><a href="wsemi.html#.pmInvResolve">pmInvResolve</a></li><li data-type='method'><a href="wsemi.html#.pmMap">pmMap</a></li><li data-type='method'><a href="wsemi.html#.pmQueue">pmQueue</a></li><li data-type='method'><a href="wsemi.html#.pmSeries">pmSeries</a></li><li data-type='method'><a href="wsemi.html#.pmThrottle">pmThrottle</a></li><li data-type='method'><a href="wsemi.html#.pseudoRandom">pseudoRandom</a></li><li data-type='method'><a href="wsemi.html#.pseudoRandomIntRange">pseudoRandomIntRange</a></li><li data-type='method'><a href="wsemi.html#.pseudoRandomRange">pseudoRandomRange</a></li><li data-type='method'><a href="wsemi.html#.queue">queue</a></li><li data-type='method'><a href="wsemi.html#.rang">rang</a></li><li data-type='method'><a href="wsemi.html#.rep">rep</a></li><li data-type='method'><a href="wsemi.html#.repObj">repObj</a></li><li data-type='method'><a href="wsemi.html#.replace">replace</a></li><li data-type='method'><a href="wsemi.html#.replaceObj">replaceObj</a></li><li data-type='method'><a href="wsemi.html#.replacePlus">replacePlus</a></li><li data-type='method'><a href="wsemi.html#.round">round</a></li><li data-type='method'><a href="wsemi.html#.secd">secd</a></li><li data-type='method'><a href="wsemi.html#.sep">sep</a></li><li data-type='method'><a href="wsemi.html#.sepInt">sepInt</a></li><li data-type='method'><a href="wsemi.html#.sind">sind</a></li><li data-type='method'><a href="wsemi.html#.split">split</a></li><li data-type='method'><a href="wsemi.html#.str2aes">str2aes</a></li><li data-type='method'><a href="wsemi.html#.str2b64">str2b64</a></li><li data-type='method'><a href="wsemi.html#.str2hint">str2hint</a></li><li data-type='method'><a href="wsemi.html#.str2md5">str2md5</a></li><li data-type='method'><a href="wsemi.html#.str2obj">str2obj</a></li><li data-type='method'><a href="wsemi.html#.str2sha512">str2sha512</a></li><li data-type='method'><a href="wsemi.html#.str2u8arr">str2u8arr</a></li><li data-type='method'><a href="wsemi.html#.strCompare">strCompare</a></li><li data-type='method'><a href="wsemi.html#.strDiff">strDiff</a></li><li data-type='method'><a href="wsemi.html#.strFindFuzz">strFindFuzz</a></li><li data-type='method'><a href="wsemi.html#.strFindFuzzDyn">strFindFuzzDyn</a></li><li data-type='method'><a href="wsemi.html#.strFindSimilar">strFindSimilar</a></li><li data-type='method'><a href="wsemi.html#.strdelleft">strdelleft</a></li><li data-type='method'><a href="wsemi.html#.strdelright">strdelright</a></li><li data-type='method'><a href="wsemi.html#.strleft">strleft</a></li><li data-type='method'><a href="wsemi.html#.strmid">strmid</a></li><li data-type='method'><a href="wsemi.html#.strright">strright</a></li><li data-type='method'><a href="wsemi.html#.stru8arr2obj">stru8arr2obj</a></li><li data-type='method'><a href="wsemi.html#.tand">tand</a></li><li data-type='method'><a href="wsemi.html#.time2day">time2day</a></li><li data-type='method'><a href="wsemi.html#.time2hour">time2hour</a></li><li data-type='method'><a href="wsemi.html#.time2min">time2min</a></li><li data-type='method'><a href="wsemi.html#.timeTZ2day">timeTZ2day</a></li><li data-type='method'><a href="wsemi.html#.timeTZ2expire">timeTZ2expire</a></li><li data-type='method'><a href="wsemi.html#.timeTZ2hour">timeTZ2hour</a></li><li data-type='method'><a href="wsemi.html#.timeTZ2min">timeTZ2min</a></li><li data-type='method'><a href="wsemi.html#.timeTZ2past">timeTZ2past</a></li><li data-type='method'><a href="wsemi.html#.timems2day">timems2day</a></li><li data-type='method'><a href="wsemi.html#.timems2hour">timems2hour</a></li><li data-type='method'><a href="wsemi.html#.timems2min">timems2min</a></li><li data-type='method'><a href="wsemi.html#.timems2time">timems2time</a></li><li data-type='method'><a href="wsemi.html#.timemsTZ2day">timemsTZ2day</a></li><li data-type='method'><a href="wsemi.html#.timemsTZ2expire">timemsTZ2expire</a></li><li data-type='method'><a href="wsemi.html#.timemsTZ2hour">timemsTZ2hour</a></li><li data-type='method'><a href="wsemi.html#.timemsTZ2min">timemsTZ2min</a></li><li data-type='method'><a href="wsemi.html#.timemsTZ2past">timemsTZ2past</a></li><li data-type='method'><a href="wsemi.html#.timemsTZ2time">timemsTZ2time</a></li><li data-type='method'><a href="wsemi.html#.treeObj">treeObj</a></li><li data-type='method'><a href="wsemi.html#.treeToFilepath">treeToFilepath</a></li><li data-type='method'><a href="wsemi.html#.trim">trim</a></li><li data-type='method'><a href="wsemi.html#.u16arr2b64">u16arr2b64</a></li><li data-type='method'><a href="wsemi.html#.u16arr2u8arr">u16arr2u8arr</a></li><li data-type='method'><a href="wsemi.html#.u8arr2ab">u8arr2ab</a></li><li data-type='method'><a href="wsemi.html#.u8arr2b64">u8arr2b64</a></li><li data-type='method'><a href="wsemi.html#.u8arr2blob">u8arr2blob</a></li><li data-type='method'><a href="wsemi.html#.u8arr2bs">u8arr2bs</a></li><li data-type='method'><a href="wsemi.html#.u8arr2obj">u8arr2obj</a></li><li data-type='method'><a href="wsemi.html#.u8arr2str">u8arr2str</a></li><li data-type='method'><a href="wsemi.html#.u8arr2u16arr">u8arr2u16arr</a></li><li data-type='method'><a href="wsemi.html#.urlParse">urlParse</a></li><li data-type='method'><a href="wsemi.html#.verifyValue">verifyValue</a></li><li data-type='method'><a href="wsemi.html#.waitFun">waitFun</a></li></ul></li></ul>
</nav>
<div id="main">
<h1 class="page-title">domDragBarAndScroll.mjs</h1>
<section>
<article>
<pre class="prettyprint source linenums"><code>import get from 'lodash/get'
import isBoolean from 'lodash/isBoolean'
import isFunction from 'lodash/isFunction'
import evem from './evem.mjs'
import domCancelEvent from './domCancelEvent.mjs'
/**
* 前端監聽指定panel與bar的DOM元素，可偵測滾輪與拖曳bar事件
*
* Unit Test: {@link https://github.com/yuda-lyu/wsemi/blob/master/test/domDragBarAndScroll.test.mjs Github}
* @memberOf wsemi
* @param {HTMLElement} panel 輸入panel元素
* @param {HTMLElement} bar 輸入bar元素
* @param {Object} [opt={}] 輸入設定物件，預設{}
* @param {Function} [getHeighRatio=()=>1] 輸入取得高度比例函數，因組件本身或內容物可能會調整尺寸, 故需由外部給予函數取得當前heighRatio，預設()=>1
* @param {Function} [getWidthRatio=()=>1] 輸入取得寬度比例函數，因組件本身或內容物可能會調整尺寸, 故需由外部給予函數取得當前widthRatio，預設()=>1
* @param {Boolean} [stopScrollPropagationForPanel=false] 輸入是否停用滑鼠捲動事件向上傳遞布林值，預設false
* @param {Boolean} [stopTouchDragPropagationForPanel=false] 輸入是否停用手機拖曳事件向上傳遞布林值，預設false
* @param {Boolean} [useTouchDragForPanel=true] 輸入是否使用手機拖曳事件布林值，預設true
* @returns {Object} 回傳物件，可使用on與clear函數，on可監聽pressBar、dragBar、freeBar事件，clear為釋放監聽
* @example
* need test in browser
*
* //監聽dom
* let divPanel = document.querySelector('#id_panel')
* let divBar = document.querySelector('#id_bar')
* let getHeighRatio = () => 0.9
* let das = domDragBarAndScroll(divPanel, divBar, { getHeighRatio, stopScrollPropagationForPanel: true, stopTouchDragPropagationForPanel: true })
* das.on('scrollPanel', () => {})
* das.on('pressBar', () => {})
* das.on('dragBar', () => {})
* das.on('freeBar', () => {})
*
* //釋放監聽
* das.clear()
*
*/
function domDragBarAndScroll(panel, bar, opt = {}) {
let fPanelWheel = null
let fPanelTouchstart = null
let fPanelTouchmove = null
let fPanelTouchend = null
let fBarMousedown = null
let fBarMouseup = null
let fBarTouchstart = null
let fBarTouchmove = null
let fBarTouchend = null
let fWindowMousemove = null
let fWindowMouseup = null
let fWindowScroll = null
let fWindowWheel = null
let fDocumentScroll = null
let fDocumentWheel = null
let barPressing = false
//getHeighRatio, 因組件本身或內容物可能會調整尺寸, 故需由外部給予函數取得當前heighRatio
let getHeighRatio = get(opt, 'getHeighRatio', null)
if (!isFunction(getHeighRatio)) {
getHeighRatio = () => 1
}
//getWidthRatio, 因組件本身或內容物可能會調整尺寸, 故需由外部給予函數取得當前widthRatio
let getWidthRatio = get(opt, 'getWidthRatio', null)
if (!isFunction(getWidthRatio)) {
getWidthRatio = () => 1
}
//stopScrollPropagationForPanel
let stopScrollPropagationForPanel = get(opt, 'stopScrollPropagationForPanel', null)
if (!isBoolean(stopScrollPropagationForPanel)) {
stopScrollPropagationForPanel = false
}
//stopTouchDragPropagationForPanel
let stopTouchDragPropagationForPanel = get(opt, 'stopTouchDragPropagationForPanel', null)
if (!isBoolean(stopTouchDragPropagationForPanel)) {
stopTouchDragPropagationForPanel = false
}
//useTouchDragForPanel
let useTouchDragForPanel = get(opt, 'useTouchDragForPanel', null)
if (!isBoolean(useTouchDragForPanel)) {
useTouchDragForPanel = true
}
//ele
let elePanel = panel
let eleBar = bar
//ev
let ev = evem()
function add() {
//fPanelWheel
fPanelWheel = (e) => {
let ry = e.deltaY / Math.abs(e.deltaY)
let rx = e.deltaX / Math.abs(e.deltaX)
ev.emit('scrollPanel', { ratioY: ry, ratioX: rx }) //寬版頁面, 用滾輪上下捲動, 實際是傳移動距離給bar
if (stopScrollPropagationForPanel) {
domCancelEvent(e) //要禁止外部元素如body被滑鼠捲動
}
}
elePanel.addEventListener('wheel', fPanelWheel)
//fPanelTouchstart
fPanelTouchstart = (e) => {
if (useTouchDragForPanel) {
//acy, acx
let acy = get(e, `touches.0.clientY`, 0)
let acx = get(e, `touches.0.clientX`, 0)
//cy, cx
let cy = -acy * getHeighRatio()
let cx = -acx * getWidthRatio()
//barPressing
barPressing = true
//emit
ev.emit('pressBar', { clientY: cy, clientX: cx }) //窄版頁面, 上鎖與紀錄頁面點擊y座標, 僅紀錄第一觸擊點座標, 另需被heighRatio修正比例
//cancel
if (stopTouchDragPropagationForPanel) {
domCancelEvent(e)
}
}
}
elePanel.addEventListener('touchstart', fPanelTouchstart)
//fPanelTouchmove
fPanelTouchmove = (e) => {
if (useTouchDragForPanel && barPressing) {
//acy, acx
let acy = get(e, `touches.0.clientY`, 0)
let acx = get(e, `touches.0.clientX`, 0)
// //check, 若水平向分量滑動較多, 則清空垂直向移動並結束
// if (acx > 0 && acy > 0 && Math.abs(acx) >= Math.abs(acy)) {
// e.touches[0].clientY = 0 //Cannot set property clientY of #<Touch> which has only a getter
// return
// }
//cy, cx
let cy = -acy * getHeighRatio()
let cx = -acx * getWidthRatio()
//emit
ev.emit('dragBar', { clientY: cy, clientX: cx }) //窄版頁面, 用滑動距離拖曳頁面, 實際是傳移動距離給bar, 僅紀錄第一觸擊點座標, 另需被heighRatio修正比例
//cancel
if (stopTouchDragPropagationForPanel) {
domCancelEvent(e) //要禁止外部元素如body被拖曳移動畫面, 此會導致無法左右拖曳元素(導致開啟overflow-x:auto無法使用)
}
}
}
elePanel.addEventListener('touchmove', fPanelTouchmove, { passive: false }) //必須使用passive=false否則無法cancel
//fPanelTouchend
fPanelTouchend = (e) => {
if (useTouchDragForPanel && barPressing) {
//barPressing
barPressing = false
//emit
ev.emit('freeBar') //窄版頁面, 解鎖
//cancel
if (stopTouchDragPropagationForPanel) {
domCancelEvent(e)
}
}
}
elePanel.addEventListener('touchend', fPanelTouchend)
//fBarMousedown
fBarMousedown = (e) => {
barPressing = true
ev.emit('pressBar', { clientY: e.clientY, clientX: e.clientX }) //寬版bar, 上鎖與紀錄點擊y座標
//domCancelEvent(e)
}
eleBar.addEventListener('mousedown', fBarMousedown)
//fBarMouseup, 可由fWindowMouseup自動解鎖, 不過若嵌入panel有攔截mouseup事件(例如popup)會導致外面window收不到mouseup事件, 故bar的mouseup事件仍需要監聽處理解鎖行為
fBarMouseup = (e) => {
if (barPressing) {
barPressing = false
ev.emit('freeBar') //窄版bar, 解鎖
//domCancelEvent(e)
}
}
eleBar.addEventListener('mouseup', fBarMouseup)
//fBarTouchstart
fBarTouchstart = (e) => {
barPressing = true
ev.emit('pressBar', { clientY: e.touches[0].clientY, clientX: e.touches[0].clientX }) //窄版bar, 上鎖與紀錄bar點擊y座標
//domCancelEvent(e)
}
eleBar.addEventListener('touchstart', fBarTouchstart)
//fBarTouchmove
fBarTouchmove = (e) => {
if (barPressing) {
ev.emit('dragBar', { clientY: e.touches[0].clientY, clientX: e.touches[0].clientX }) //窄版bar, 用滑動距離拖曳bar, 實際是傳移動距離給bar
domCancelEvent(e) //要禁止外部元素如body被拖曳移動畫面
}
}
eleBar.addEventListener('touchmove', fBarTouchmove, { passive: false }) //必須使用passive=false否則無法cancel
//fBarTouchend
fBarTouchend = (e) => {
if (barPressing) {
barPressing = false
ev.emit('freeBar') //窄版bar, 解鎖
//domCancelEvent(e)
}
}
eleBar.addEventListener('touchend', fBarTouchend)
//fWindowMousemove
fWindowMousemove = (e) => {
if (barPressing) {
ev.emit('dragBar', { clientY: e.clientY, clientX: e.clientX }) //寬版bar, 用鎖與滑動距離拖曳bar
//domCancelEvent(e)
}
}
window.addEventListener('mousemove', fWindowMousemove)
//fWindowMouseup
fWindowMouseup = (e) => {
if (barPressing) {
barPressing = false
ev.emit('freeBar') //寬版bar, 解鎖
if (stopScrollPropagationForPanel) {
domCancelEvent(e) //要禁止回傳否則會連外部body捲軸一起移動畫面
}
}
}
window.addEventListener('mouseup', fWindowMouseup)
//fWindowScroll
fWindowScroll = (e) => {
// if (barPressing) {
// console.log('cancel window scroll')
// //若已經為滑鼠捲動或觸控拖曳時, 則取消傳遞至外部的scroll事件, 避免例如手機拖曳觸底時會另外呼叫window的scroll事件
// //此事件無法取消(cancelable=false), 即便使用passive=false
// domCancelEvent(e)
// }
}
window.addEventListener('scroll', fWindowScroll, { passive: false })
//fWindowWheel
fWindowWheel = (e) => {
// if (barPressing) {
// console.log('cancel window wheel')
// //若已經為滑鼠捲動或觸控拖曳時, 則取消傳遞至外部的scroll事件, 避免例如手機拖曳觸底時會另外呼叫window的scroll事件
// //此事件無法取消(cancelable=false), 即便使用passive=false
// domCancelEvent(e)
// }
}
window.addEventListener('wheel', fWindowWheel, { passive: false })
//fDocumentScroll
fDocumentScroll = (e) => {
// if (barPressing) {
// console.log('cancel document scroll')
// //若已經為滑鼠捲動或觸控拖曳時, 則取消傳遞至外部的scroll事件, 避免例如手機拖曳觸底時會另外呼叫window的scroll事件
// //此事件無法取消(cancelable=false), 即便使用passive=false
// domCancelEvent(e)
// }
}
document.addEventListener('scroll', fDocumentScroll, { passive: false })
//fDocumentWheel
fDocumentWheel = (e) => {
// if (barPressing) {
// console.log('cancel document wheel')
// //若已經為滑鼠捲動或觸控拖曳時, 則取消傳遞至外部的scroll事件, 避免例如手機拖曳觸底時會另外呼叫window的scroll事件
// //此事件無法取消(cancelable=false), 即便使用passive=false
// domCancelEvent(e)
// }
}
document.addEventListener('wheel', fDocumentWheel, { passive: false })
}
function clear() {
//elePanel remove wheel, touchstart, touchmove, touchend
elePanel.removeEventListener('wheel', fPanelWheel)
elePanel.removeEventListener('touchstart', fPanelTouchstart)
elePanel.removeEventListener('touchmove', fPanelTouchmove)
elePanel.removeEventListener('touchend', fPanelTouchend)
//eleBar remove mousedown, mouseup, touchstart, touchmove, touchend
eleBar.removeEventListener('mousedown', fBarMousedown)
eleBar.removeEventListener('mouseup', fBarMouseup)
eleBar.removeEventListener('touchstart', fBarTouchstart)
eleBar.removeEventListener('touchmove', fBarTouchmove)
eleBar.removeEventListener('touchend', fBarTouchend)
//window remove mousemove, mouseup, wheel
window.removeEventListener('mousemove', fWindowMousemove)
window.removeEventListener('mouseup', fWindowMouseup)
window.removeEventListener('scroll', fWindowScroll)
window.removeEventListener('wheel', fWindowWheel)
//document remove scroll, wheel
document.removeEventListener('scroll', fDocumentScroll)
document.removeEventListener('wheel', fDocumentWheel)
}
//add
add()
//save
ev.clear = clear
return ev
}
export default domDragBarAndScroll
</code></pre>
</article>
</section>
</div>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Wed Jul 19 2023 23:38:49 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>
<script>prettyPrint();</script>
<script src="scripts/polyfill.js"></script>
<script src="scripts/linenumber.js"></script>
</body>
</html>