@sanyueqi/web-components/dist/drag-waifu.min.js

Web components

!function(e){"function"==typeof define&&define.amd?define(e):e()}(function(){"use strict";function e(e={}){const{position:t="fixed",id:n="drag-waifu",width:o="200px",height:i="200px",top:s,bottom:d="0",left:l="0",right:f,spineConfig:r}=e,u=document.createElement("div");u.id=n,u.style.width=o,u.style.height=i,u.style.position=t,u.style.cursor="move",u.style.display="flex",u.style.alignItems="center",u.style.justifyContent="center",u.style.color="white",u.style.fontFamily="Arial, sans-serif",u.style.fontWeight="bold",u.style.userSelect="none",u.style.zIndex="9999",void 0!==s&&(u.style.top=s),void 0!==d&&(u.style.bottom=d),void 0!==l&&(u.style.left=l),void 0!==f&&(u.style.right=f),document.body.appendChild(u);let m,y,c=!1;const a=function(e){c=!0;const t=u.getBoundingClientRect();m=e.clientX-t.left,y=e.clientY-t.top,e.preventDefault()},p=function(e){if(!c)return;let t=e.clientX-m,n=e.clientY-y;const o=window.innerWidth-u.offsetWidth,i=window.innerHeight-u.offsetHeight;t=Math.max(0,Math.min(t,o)),n=Math.max(0,Math.min(n,i)),u.style.left=t+"px",u.style.top=n+"px",u.style.bottom="",u.style.right=""},h=function(){c=!1},g=function(){const e=u.getBoundingClientRect(),t=window.innerWidth,n=window.innerHeight;if(e.right<0||e.bottom<0||e.left>t||e.top>n)u.style.left=t-u.offsetWidth+"px",u.style.top=n-u.offsetHeight+"px",u.style.bottom="",u.style.right="";else{let e=parseFloat(u.style.left)||0,o=parseFloat(u.style.top)||0;const i=t-u.offsetWidth,s=n-u.offsetHeight;e=Math.max(0,Math.min(e,i)),o=Math.max(0,Math.min(o,s)),u.style.left=e+"px",u.style.top=o+"px"}};u.addEventListener("mousedown",a),document.addEventListener("mousemove",p),document.addEventListener("mouseup",h),window.addEventListener("resize",g);const w=new SpineManager(`#${n}`,n);return w.init(r||[],!0),{destroy:function(){u.removeEventListener("mousedown",a),document.removeEventListener("mousemove",p),document.removeEventListener("mouseup",h),window.removeEventListener("resize",g),document.body.contains(u)&&document.body.removeChild(u),w&&"function"==typeof w.destroy&&w.destroy()},adjustPosition:g}}"undefined"!=typeof module&&module.exports&&(module.exports=e),"undefined"!=typeof window&&(window.createDraggableWaifu=e)});