요소가 삭제되기 전에 삭제 가능 영역에서 드래그 가능한 요소 미리보기

Question

드래그 앤 드롭을 구현하려고합니다. 모든 것은 예상대로 작동하지만 사용자가 텍스트를 포함하는 div를 포함하는 div를 드래그 할 때 마우스를 놓기 전에 droppable 영역 위로 드래그했을 때의 모양을 볼 수 있기를 바랍니다. 그거 떨어 뜨려.

본질적으로 나는 AJAX를 통해 DB에 드롭되고 커밋되기 전에 텍스트가 새로운 위치에서 어떻게 보이는지 미리 볼 수 있어야합니다.

실제 드래그 앤 드롭은 예상대로 작동하지만 사용자가 요소를 드래그 가능한 영역으로 드래그하면 두 요소를 어떻게 바꿀 수 있는지 알 수 없습니다.

나는 over 이벤트에서 그들을 교환하고 나서 out 이벤트로 되돌려 놓으려고했다. 그러나 드래그 한 div의 값을 잠재적으로 떨어 뜨린 위치로 설정하면 되돌릴 방법이 없습니다.

변수 내에서 끌기 텍스트를 저장하려고 시도했지만 Out : 이벤트에서 다시 설정하려고하면 범위가 손실됩니다.

원하는 효과는 다음과 같습니다

사용자는 낙하 할 영역에 요소를 드래그. droppable 내부의 텍스트는 드래그 된 텍스트와 바뀝니다. 사용자가 변경을 좋아하면 드롭 다운시 변경 사항을 커밋하십시오. 다시 되돌릴 수 없다면 다시 원래 상태로 되돌립니다.

다음은 명백하게 실패한 코드를 작동시키기 위해 사용하려고 시도한 작은 스 니펫입니다.

tolerance: "pointer", 
helper: "clone", 
hoverClass: "dragndrophover", 
over: function(event, ui) { 
    if($(this).hasClass('xlt_text')){ 
     //ui.draggable.html($(this).html()); 
    } 
}, 
out: function(event, ui) { 

    if($(this).hasClass('xlt_text')){ 
     //$(this).html(ui.draggable.html()); 

    } 
},  

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

당신은 그냥 이벤트에 텍스트를 지울 수 있습니다

Answer 1

:

tolerance: "pointer", 
helper: "clone", 
hoverClass: "dragndrophover", 
over: function(event, ui) { 
    if($(this).hasClass('xlt_text')){ 
    $(this).text(ui.draggable.text()); 
    } 
}, 
out: function(event, ui) { 
    $(this).text(""); // clear the added text 
},