jQuery UI 드래그 가능 및 드롭 가능, 반전 및 수락 요소

Question

이 코드를 실험 해 보았습니다 : jsfiddle 상자를 강조 표시하여 상자를 놓을 수는 있지만 알려주지는 않습니다. 아무도 내가 되돌릴 그냥 대신 droppable 받아들이도록이 코드를 변경할 수있는 방법을 알고 있습니까?

$(".DragItem").draggable({ 
    revert: true, 
    helper: "clone" 
}); 

$(".DropItem").droppable({ 
    tolerance: "touch", 
    over: function (event, ui) { 
     var dropItem = $(this); 
     var dragItem = $(ui.draggable); 
     var valid = String(dropItem.data("id")).indexOf(dragItem.data("id")) > -1; 
     if (valid) { 
      dropItem.addClass("DropTargetValid"); 
     } else { 
      dropItem.addClass("DropTargetInvalid"); 
     } 
    }, 
    out: function (event, ui) { 
     var dropItem = $(this); 
     dropItem.removeClass("DropTargetValid"); 
     dropItem.removeClass("DropTargetInvalid"); 
    }, 
    deactivate: function (event, ui) { 
     var dropItem = $(this); 
     dropItem.removeClass("DropTargetValid"); 
     dropItem.removeClass("DropTargetInvalid"); 
    } 
}); 

Answer 1

당신은 올바른 div의에 클론()를 추가하고 그들이 먼저 accept: 모든 dragable 요소를 일치하지 않는 경우이를 복귀 한 후 처리해야합니다 drop: 섹션의 되돌리기. 복제 및 드래그 할 요소의 원위치를 작성하고 저장해야만 원위치로 복귀 한 다음 페이지에서 제거 할 수 있습니다.

JSnippet demo draggable & droppable

재미를 :

는 여기에하면 마지막 스크립트 데모입니다!

Answer 2

나는 이런 식으로 뭔가부터 시작합니다 :

• 다시 사용하는 내장 쿼리 UI 기능을, 예를 들어, 작은 수의 컨테이너가있는 경우 "accept"또는 "activeClass"매개 변수가 누락 될 수 있습니다.
• - "droppables"를 별도로 선언하고 예를 들어 "accept"를 사용할 수 있습니다. (아래의 데모에서와 같이)
• drackables을 "해킹"하려고 할 때 drappables의 특정 클래스 만 허용 할 수 있습니다. 특히 draggables 및 droppables가 플랫 div보다 복잡한 html 구조를 갖는 경우 복잡한 요소가있는 경우 drappables가 가능하지만 그리 쉽지는 않습니다.

샘플 :

$(".drop1").droppable({ 
    accept: '.drag1', 
    activeClass: 'DropTargetValid', 
    drop: function (ev, ui) { 
     $(ev.target).append(ui.draggable.clone()); 
    } 
}); 

Fiddle demo

--- 편집 ---

Updated demo