두 목록 사이의 드래그 가능한 요소

이것은 두 개의 설정된 지점 사이에 기본적인 끌어서 놓기 기능을 위한 것입니다.

유용한 리소스

이것은 내가 사용한 GSAP 드래그 가능용documentation입니다. 나는 또한 이 기능으로 무엇을 할 수 있는지에 대한 아이디어를 얻는 데 도움이 되는 Wael Yasmina의 이것을 보았습니다.


Steve Wojcik의 thisCodePen를 발견하고 거기에서 작업했습니다. 기본에 익숙해지고 싶었기 때문에 dropShadow, dragGroup 및 highlight와 같은 많은 추가 기능을 제거했습니다. 주요 드래그 앤 드롭 기능에 영향을 미치는지 확인하기 위해 각 섹션을 테스트했으며 그렇지 않은 경우 제거했습니다. 이것은 또한 다른 부분이 무엇을 하는지에 대한 아이디어를 얻는 데 도움이 되었습니다.

수입품

다음 스크립트를 사용했습니다.//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/utils/Draggable.min.js//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

HTML

<div id="container" class="container">
  <h1 id="list1">List 1</h1>
  <h1 id="list2">List 2</h1>

  <div id="dropArea"></div>
  <div id="dropArea2"></div>
  <div id="dropArea3"></div>

  <div class="first">
    <h3>1</h3>
  </div>
  <div class="second">
    <h3>2</h3>
  </div>
  <div class="third">
    <h3>3</h3>
  </div>
</div>

컨테이너: 경계

목록: 제목만 사용되며 사용되지 않음

놓기 영역: 상자가 목록 2 아래로 떨어지는 위치

첫 번째/두 번째/세 번째: 드래그 가능한 상자

CSS

.container
{
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 400px;
  height: 330px;
  border-radius: 3px;
  border-style: solid;
  border-color: #fed3c1;
  border-width: 2px;
}

#list1 {
  margin-left: 100px;
  position: relative;
  margin-top: 35px;
}

#list2 {
  margin-left: 230px;
  position: absolute;
  margin-top: -58px;
}

.first
{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 50px;
  height: 50px;
  background-color: pink;
  top: 100px;
  left: 106px;
  text-align: center;
}

#dropArea
{
  position: absolute;
  top: 100px;
  left: 242px;
  width: 50px;
  height: 50px;
}

.second
{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 50px;
  height: 50px;
  background-color: pink;
  top: 175px;
  left: 105px;
  text-align: center;
}

#dropArea2
{
  position: absolute;
  top: 175px;
  left: 242px;
  width: 50px;
  height: 50px;
}

.third
{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 50px;
  height: 50px;
  background-color: pink;
  top: 250px;
  left: 105px;
  text-align: center;
}

#dropArea3
{
  position: absolute;
  top: 250px;
  left: 242px;
  width: 50px;
  height: 50px;
}

모든 것이 어디에 있는지 정확히 볼 수 있도록 작업하는 동안 모든 것에 배경색을 추가했습니다. 나는 새 상자를 추가할 때를 제외하고 거의 모든 것을 같은 위치에 유지했습니다. 시작과 끝을 더 낮게 만들었습니다.

자바스크립트

var dropArea = "#dropArea";
var overlapThreshold = "60%";

Draggable.create(".first", 
{
  bounds: "#container",
  onDrag: function(e) 
  {
      TweenLite.to(".first", 0.2, 
      {
        scaleX:1.10,
        scaleY:1.10
      });
  },
  onDragEnd: function(e) 
  {
    if (this.hitTest(dropArea, overlapThreshold)) 
    {
      TweenLite.to(this.target, 0.2, 
      {
        x: 136,
        y: 0,
        scaleX:1,
        scaleY:1
      });
    } 
    else 
    {
      TweenLite.to(this.target, 0.2, 
      {
        x: 0,
        y: 0,
        scaleX:1,
        scaleY:1
      });
    }
  }
});


var dropArea2 = "#dropArea2";
var overlapThreshold = "60%";

Draggable.create(".second", 
{
  bounds: "#container",
  onDrag: function(e) 
  {
      TweenLite.to(".second", 0.2, 
      {
        scaleX:1.10,
        scaleY:1.10
      });
  },
  onDragEnd: function(e) 
  {
    if (this.hitTest(dropArea2, overlapThreshold)) 
    {
      TweenLite.to(this.target, 0.2, 
      {
        x: 136,
        y: 0,
        scaleX:1,
        scaleY:1
      });
    } 
    else 
    {
      TweenLite.to(this.target, 0.2, 
      {
        x: 0,
        y: 0,
        scaleX:1,
        scaleY:1
      });
    }
  }
});


var dropArea3 = "#dropArea3";
var overlapThreshold = "60%";

Draggable.create(".third", 
{
  bounds: "#container",
  onDrag: function(e) 
  {
      TweenLite.to(".third", 0.2, 
      {
        scaleX:1.10,
        scaleY:1.10
      });
  },
  onDragEnd: function(e) 
  {
    if (this.hitTest(dropArea3, overlapThreshold)) 
    {
      TweenLite.to(this.target, 0.2, 
      {
        x: 136,
        y: 0,
        scaleX:1,
        scaleY:1
      });
    } 
    else 
    {
      TweenLite.to(this.target, 0.2, 
      {
        x: 0,
        y: 0,
        scaleX:1,
        scaleY:1
      });
    }
  }
});

이것은 각 상자에 대해 하나씩 동일한 코드 기반을 세 번 가집니다. 방금 상자가 착륙해야 하는 위치를 반영하도록 변수 이름을 변경했습니다.

바운드: 드래그 가능한 항목을 보관할 컨테이너를 넣는 곳입니다

.

onDrag: 상자를 끌 때 상자가 약간 더 크게 보입니다.

onDragEnd: 상자가 dropArea에 있는 경우 상자는 그대로 유지되고 그렇지 않으면 목록 1 아래의 원래 위치로 돌아갑니다

.