라이브 Droppable UI 요소 만 두 번째 시도에서 놓기 허용

Question

Ajax를 통해 페이지에 동적으로 추가되는 JQuery UI Droppables가 있습니다. 라이브 방식으로 Droppables를 연결하는 지침을 따르도록 시도하는

jQuery UI Droppable : how to make it live?

을 처음 시도하는 드래그 앤 드롭하려면 hoverClass는 엮은 나 드롭 대상이되지 않는 등록 Droppable합니다 (드롭 이벤트 처리기가 실행되지 않음). 후속 시도에서 예상대로 작동합니다.

바이올린 : http://jsfiddle.net/ericjohannsen/ESCN9/

내가 드롭 기능이 처음 작동시킬 수있는 방법

?

Answer 1

코드는 "ctFilterDropArea"요소에 마우스를 올리고 라이브 삭제 가능 기능을 시작하는 경우에만 작동합니다.

다른 div를 드래그 한 후에 liveDroppable 구현을 시작해보십시오.

JSFiddle : - http://jsfiddle.net/ESCN9/3/

$.fn.liveDroppable = function (opts) { 
    if (!$(this).data("ctDropInit")) { 
     $(this).data("ctDropInit", true).droppable(opts); 
    } 
}; 

$('#dragMe').draggable({ 
    cursor: "move", 
    distance: 20, 
    opacity: 0.7, 
    helper: 'clone', 
    start: startDroppable 
}); 

function startDroppable() { 
    $('#ctFilterDropArea').liveDroppable({ 
     hoverClass: "ctDropHover", 
     drop: function (event, ui) { 
      alert("Dropped!"); 
     } 
    }); 
}