gsap+Draggable实现拖拽式下拉框效果代码-html代码-BFW代码库

代码语言：html
所属分类：拖放
代码描述：gsap+Draggable实现拖拽式下拉框效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/open-props.css">
  <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/open-props.normalize.min.css">
<style>


*,
*:after,
*:before {
        box-sizing: border-box;
}

body {
        display: grid;
        place-items: center;
        min-height: 100vh;
        font-family:  'Google Sans', sans-serif, system-ui;
        background: var(--surface-2);
}

[popover] {
        border: 0;
        padding: 0;
        margin: 0;
        -webkit-clip-path: inset(100% -100% -100vh -100%);
                clip-path: inset(100% -100% -100vh -100%);
        overflow: visible;
/*      transition: display 0.5s;*/
        background: none;
}

/*[popover]:initial {*/
/*      --show: 0;*/
/*      transition: display 0.5s;*/
/*}*/
[popover]:popover-open {
        --show: 1;
}

/*.list:initial {
        transform: translate(0, 100%);
}*/

.drag-list {
        --backdrop: var(--surface-1);
        transform: translate(0, calc(var(--show, 0) * 100%));
        transition: transform 0.25s;
}

.drag-list {
        background: var(--backdrop);
        transform-origin: 50% 0%;
}

.drag-list:after,
.drag-list:before {
        content: "";
        position: absolute;
        bottom: 100%;
        height: 100%;
        left: 0;
        right: 0;
        background-color: var(--backdrop);
}

.drag-list:after {
        background: transparent;
        background-image: url("//repo.bfw.wiki/bfwrepo/images/book/bear-2022--black.png");
        background-size: 60%;
        background-position: 50% 90%;
        background-repeat: no-repeat;
        opacity: 0.25;
        filter: saturate(0.3);
}

@media (prefers-color-scheme: dark) {
        .drag-list:after {
                background-image: url("//repo.bfw.wiki/bfwrepo/images/book/bear-2022--white.png");
        }
}

[behavior=button] {
        padding: 0;
        width: 180px;
        background: var(--surface-1);
        position: relative;
}

[behavior=selected-value] {
        flex: 1;
        text-align: left;
}

[popover] {
        anchor-name: --listbox;
        display: block;
        background: red;
        translate: 0 -100%;
}

.pop-wrap {
        position: relative;
}

:is([behavior=button], option) {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.5rem 1rem;
        justify-content: flex-start;
}

.handle {
        width: 48px;
        aspect-ratio: 1;
        position: absolute;
        top: 100%;
        left: 50%;
        translate: -50% 0;
        border-radius: 50%;
        transition: background 0.2s;
        overflow: hidden;
}

.handle:hover:not(:active) {
        background: hsl(0 0% 50% / 0.2);
}

.handle__cord {
        position: absolute;
        left: 50%;
        height: 100%;
        top: 40%;
        width: 10%;
        background: linear-gradient(90deg,transparent 55%, white), var(--text-2);
        translate: -50% -90%;
}

.handle__tug {
        position: absolute;
        width: 30%;
        aspect-ratio: 1;
/*      border-radius: 50%; */
        background: linear-gradient(80deg, transparent 55%, hsl(0 0% 100% / 1)), var(--text-2);
        top: 40%;
        left: 50%;
        translate: -50% 0;
  -webkit-clip-path: polygon(0 100%, 25% 0, 75% 0, 100% 100%);
          clip-path: polygon(0 100%, 25% 0, 75% 0, 100% 100%);
  
}

.sock {
        width: 24px;
        flex-shrink: 0;
}

:root:not(:has(:checked)) [behavior=button] .sock path:first-of-type {
        fill: white;
}
:root:not(:has(:checked)) [behavior=button] .sock path:last-of-type {
        fill: black;
}

selectmenu:has(:popover-open) .marker {
        rotate: 180deg;
}

selectmenu {
        box-shadow: var(--shadow-5);
}

[behavior=button]:focus-visible {
        outline-color: hsl(var(--hue) 100% 50%);
        outline-offset: -2px;
}

.sock path:first-of-type {
        fill: hsl(var(--hue) 80% 80%);
}
.sock path:last-of-type {
        fill: hsl(var(--hue) 50% 50%);
}

[value=red] { --hue: 10; }
[value=orange] { --hue: 30; }
[value=yellow] { --hue: 45; }
[value=green] { --hue: 140; }
[value=blue] { --hue: 210; }

option:is(:hover, :focus-visible) {
        --active: 1;
        background: var(--surface-3);
}

option svg {
        transform:
                rotate(calc(var(--active, 0) * 10deg))
                scale(calc((var(--active, 0) * 0.25) + 1));
        transition: transform 0.2s;
}

option:is(:hover, :focus-visible) {
        outline-color: hsl(var(--hue) 100% 50%);
        outline-offset: -2px;
}

.marker {
        width: 16px;
        fill: var(--text-2);
        transform-origin: 50% 45%;
        transition: rotate 0.2s;
}
</style>

  
</head>

<body>
  <selectmenu>
  <div slot="button">
    <button behavior="button">
      <svg class="sock" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124 201">
        <path d="m9.284 152.432 36.795-46.23c3.506-4.492 5.524-10.121 5.685-15.853l2.348-84.06C54.163 4.456 55.638 3 57.44 3h56.609c.919 0 1.797.387 2.426 1.068.629.681.953 1.598.896 2.53l-5.59 89.814 7.347 16.81a22.571 22.571 0 0 1 .101 17.769c-2.397 5.66-7.049 10.083-12.765 12.134l-18.73 6.723-35.857 39.861c-5.35 5.946-12.847 9.292-20.73 9.291-.405 0-.812-.009-1.219-.027-8.325-.363-16.01-4.426-21.086-11.145-7.95-10.525-7.768-25.08.443-35.396Z" fill="#F30909" />
        <path d="m7.3 153.482 38.18-47.174a27.445 27.445 0 0 0 5.899-16.177l2.436-85.776A3.454 3.454 0 0 1 57.268 1h58.738a3.454 3.454 0 0 1 3.447 3.672l-5.8 91.646 7.624 17.154a22.683 22.683 0 0 1 .105 18.131 22.68 22.68 0 0 1-13.246 12.382l-19.435 6.859-37.206 40.675a29.096 29.096 0 0 1-22.774 9.453 29.102 29.102 0 0 1-21.88-11.373 29.076 29.076 0 0 1 .46-36.117ZM66.806 7.907h-6.182l-.793 27.916h6.975V7.907Zm15.368 0h-8.46v27.916h8.46V7.907Zm6.907 0v27.916h7.883l1.7-27.916H89.08Zm16.503 0-1.699 27.916h6.676l1.766-27.916h-6.743ZM89.856 143.112l15.982-5.641c4.179-1.475 7.446-4.529 9.199-8.6 1.753-4.071 1.728-8.544-.072-12.594l-6.409-14.42a30.715 30.715 0 0 0-14.393 9.838 30.61 30.61 0 0 0-6.829 19.252c0 4.209.865 8.348 2.522 12.165Zm-43.46 43.744 37.248-40.718a37.441 37.441 0 0 1-3.218-15.191 37.537 37.537 0 0 1 8.376-23.609 37.652 37.652 0 0 1 18.002-12.175l3.318-52.433H59.634l-1.352 47.596a34.393 34.393 0 0 1-7.406 20.291l-.019.024-38.188 47.185c-.129.158-.25.319-.373.48 16.312.662 30.443 12.341 33.79 28.87.103-.107.21-.21.31-.32Zm-34.077-1.464a22.207 22.207 0 0 0 16.698 8.679 22.217 22.217 0 0 0 10.777-2.262 29.088 29.088 0 0 0-.383-2.83c-2.756-14.709-16.034-24.787-30.723-23.716a22.192 22.192 0 0 0 3.631 20.129Z" fill="#8F0000" />
      </svg>
      <span behavior="selected-value"> Choose your sock! </span>
      <span behavior="marker">
        <svg class="marker" viewBox="0 0 320 512" title="angle-down">
          <path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z" />
        </svg>
      </span>
    </button>
  </div>
  <div class="listbox" slot="listbox">
    <div popover behavior="listbox">
      <div class="list">
        <div class="drag-list">
          <option value="red">
            <svg class="sock" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124 201">
              <path d="m9.284 152.432 36.795-46.23c3.506-4.492 5.524-10.121 5.685-15.853l2.348-84.06C54.163 4.456 55.638 3 57.44 3h56.609c.919 0 1.797.387 2.426 1.068.629.681.953 1.598.896 2.53l-5.59 89.814 7.347 16.81a22.571 22.571 0 0 1 .101 17.769c-2.397 5.66-7.049 10.083-12.765 12.134l-18.73 6.723-35.857 39.861c-5.........完整代码请登录后点击上方下载按钮下载查看