드래그 앤 드롭과 jQuery로 위치를 감지하고 싶습니까?

Question

다른 div와 반대로 드래그 한 항목의 위치를 ​​감지하는 방법을 알아야합니다. 항목이 두 개의 다른 div 밖에 있는지 여부를 감지해야합니다. (나는 맥 도크 유형의 시작 페이지를 만들고 있는데 바에서 꺼내서 아이콘을 삭제할 수 있도록이 작업을 수행하는 방법을 알아야합니다.)

도움을 주시면 감사하겠습니다.

Answer 1

jquery UI의 draggable과 droppable의 조합을 사용할 수 있습니다. 툴바를 다음과 같이 drappable 및 draggable로 설정하십시오.

var deleteClass = 'deleteMe'; 

$('div.toolbar').droppable({ 
    out:function(event, ui){ 
     ui.draggable.addClass(deleteClass); 
    }, 
    over:function(event,ui){ 
     ui.draggable.removeClass(deleteClass); 
    } 
});​​​​​​​​​​​​​​​​​​​​ 

$('div.icon').draggable({ 
    helper:'clone', 
    revert:'valid', 
    opacity:.5, 
    stop: function(event,ui){ 
     if($(this).hasClass('deleteMe')){$(this).fadeOut();} 
    }  
}); 

기본적으로 작업은 이벤트에 있습니다. 삭제 가능 도구 모음의 Out 및 Over 이벤트는 아이콘에서 도구 모음 위에 아이콘이없는 것을 알 수있는 플래그로 사용할 수있는 클래스를 추가 및 제거합니다. 드래그 가능한 아이콘의 stop 이벤트는 툴바 위에 아이콘이없는 경우 아이콘을 제거하도록합니다. this jsFiddle으로 시도해보십시오. jquery ui sortable 위젯을 사용하여 동일한 작업을 수행 할 수 있으므로 원하는 경우 사용자가 아이콘을 다시 정렬하도록 할 수도 있습니다.