JAVASCRIPT#47 - jQuery UI 2부 draggable과 selectable

Who and What is ruling you? Question of the day.

    

JAVASCRIPT#47 - jQuery UI 2부 draggable과 selectable

1. 요소 드래그 가능하게 하기.

$(셀렉터).draggable();

2. 드래그 가능구역 제한하기

- 부모요소로 제한 : $(셀렉터).draggable({ containment: "parent" });

- 제한구역 요소지정하기 : $(셀렉터).draggable({ containment: "#id"});

 

3. 선택가능 요소로 만들기

- $(셀렉터).selectable();

- 위처럼 초기화되면 선택된 요소는 ui-selected 가 적용되고 선택중인 그러니까 마우스 다운시

ui-selecting이 적용된다.

4. 표같은 목록만들기 CSS

#itemlist
{
    list-style-type: none; // 항목마다 붙을 기호 없앰
    margin: 0;
    padding: 0;
    width: 300px; // 가로 최대치
}

#itemlist li // 목록 세부요소인 li  설정
{
    background: black;
    margin: 3px; // 세부요소간의 간격
    padding: 1px;
    float: left;
    width: 90px;
    height: 90px;

    text-align: center;
    font-size: 4em;
}

4. drag와 select 이벤트

- stop : drag및 select 가 끝나면 작동한다.

5. each 함수 [복습]

- $(다중셀렉팅).each(function(인덱스){회차반복함수}); 혹은 $.each(배열, function(인덱스){회차반복함수});

$(".ui-selected").each(function()
            {
                print.push($(this).html());
            });

해석 : ui-selected라는 클래스를 가진 요소들을 전부선택해 한번씩 반복한다. print라는 배열에 회차 해당요소의 html을 집어넣는다.

6. 충돌 오버랩 overlap 또는 collision 구현

- 충돌구현

function collision($div1, $div2)
{
      var x1 = $div1.offset().left;
      var y1 = $div1.offset().top;
      var h1 = $div1.outerHeight(true);
      var w1 = $div1.outerWidth(true);
      var b1 = y1 + h1;
      var r1 = x1 + w1;

      var x2 = $div2.offset().left;
      var y2 = $div2.offset().top;
      var h2 = $div2.outerHeight(true);
      var w2 = $div2.outerWidth(true);
      var b2 = y2 + h2;
      var r2 = x2 + w2;
       
      if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2)
        alert("collided!");
}

window.setInterval(function() {collision($('#div1'), $('#div2'));}, 200);

조건을 if(x1 >= x2 && y1 >= y2 && r1 <= r2 && b1 <= b2) 으로 바꾸면 포함시 발동하게 됨.

selectable + draggable + each함수 + 포함충돌 + mp3재생 예제

Selectable each 예제 포함충돌 예제 VKRS.zip