拖动事件不起作用 - 防止拖放

Question

编辑：为了知识的缘故，我仍然想知道这个问题的答案。尽管我在drop事件中使用out事件，但我设法得到了类似的效果。

我有一个工作拖放，将记录图像已放入哪个框。但是，当我创建一个拖动事件来说明用户从盒中删除图像的事实，它打破了拖放导致图像不可复制。

以下两个代码段之间的唯一区别是后者增加了 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

您需要在event和ui参数传递给您的handleDragEvent()和handleDropEvent()功能。

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