드래그 이벤트가 작동하지 않음 - 드래그 앤 드롭을 방지합니다.

Question

편집 : 아직 지식을 위해서이 질문에 대한 답변을 알고 싶습니다. 내가 드롭 이벤트에 대한 아웃 이벤트를 사용하여 원하는 것과 비슷한 효과를 얻을 수 있었다.

이미지가 놓여있는 상자를 기록하는 작업 끌어서 놓기 작업이 있습니다. 그러나 사용자가 상자에서 이미지를 제거하는 사실을 설명하기 위해 끌기 이벤트를 만들면 끌어 놓기가 끊어집니다 이미지가 흔들림을 일으킬 수 있습니다.

두 코드 섹션 간의 유일한 차이점은 후자에 start: handleDragEvent이 추가되어 있고 "이동 됨"이라고 쓰는 기능입니다.

코드 작품 :

function init() { 
    $('#ImageE1, #ImageE2, #ImageE3').draggable({ containment: '#ForDualScreen', cursor: 'move', zIndex: 20000, handle: 'img'}); 
    $('#BoxE1, #BoxE2, #BoxE3, #BoxE4, #BoxE5, #BoxE6, #BoxE7, #BoxE8, #BoxE9, #BoxE10, #BoxE11, #BoxE12, #BoxE13, #BoxE14, #BoxE15').droppable({ 
    drop: handleDropEvent 
    }); 
} 

function handleDropEvent(event, ui) { 
    var draggable = ui.draggable; 
    var draggableId = ui.draggable.attr("id") + 'PLACE';  
    var droppableId = $(this).attr("id");    
    alert('BLARGH "' + draggableId + '" was dropped onto me!' + droppableId); 
    document.getElementById(draggableId).value = droppableId; 
} 

코드가 더 이상 작동합니다

function init() { 
    $('#ImageE1, #ImageE2, #ImageE3').draggable({ containment: '#ForDualScreen', cursor: 'move', zIndex: 20000, handle: 'img', start: handleDragEvent}); 
    $('#BoxE1, #BoxE2, #BoxE3, #BoxE4, #BoxE5, #BoxE6, #BoxE7, #BoxE8, #BoxE9, #BoxE10, #BoxE11, #BoxE12, #BoxE13, #BoxE14, #BoxE15').droppable({ 
    drop: handleDropEvent 
    }); 
} 

function handleDragEvent(event, ui) { 
    var draggable = ui.draggable; 
    var draggableId = ui.draggable.attr("id") + 'PLACE';  
    document.getElementById(draggableId).value = "Moved"; 
} 

function handleDropEvent(event, ui) { 
    var draggable = ui.draggable; 
    var draggableId = ui.draggable.attr("id") + 'PLACE';  
    var droppableId = $(this).attr("id");    
    alert('BLARGH "' + draggableId + '" was dropped onto me!' + droppableId); 
    document.getElementById(draggableId).value = droppableId; 
} 

Answer 1

당신은 당신의 handleDragEvent() 및 handleDropEvent() 기능에 event 및 ui 매개 변수를 전달해야합니다.

function init() { 
    $('#ImageE1, #ImageE2, #ImageE3').draggable({ containment: '#ForDualScreen', cursor: 'move', zIndex: 20000, handle: 'img', start: handleDragEvent}); 
    $('#BoxE1, #BoxE2, #BoxE3, #BoxE4, #BoxE5, #BoxE6, #BoxE7, #BoxE8, #BoxE9, #BoxE10, #BoxE11, #BoxE12, #BoxE13, #BoxE14, #BoxE15').droppable({ 
    drop: function(event, ui) { handleDropEvent(event, ui); } 
    }); 
}