ドラッグイベントが動作しない - ドラッグアンドドロップを防止する

Question

編集：私はまだ知識のためにこの質問に対する答えを知りたいと思う。私はドロップイベントでoutイベントを使用したいのと同様の効果を得ることができました。

イメージが配置されているボックスを記録する作業中のドラッグアンドドロップがあります。ただし、ユーザーがボックスからイメージを削除するという事実を考慮してドラッグイベントを作成すると、ドラッグアンドドロップ画像を浮き彫りにする。

以下の2つのコードセクションの唯一の違いは、後者には start: handleDragEventの追加があり、「Moved」と書くための関連機能です。

コードワークス：

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); } 
    }); 
}