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

Drag event not working - prevents drag and drop

本文关键字：拖放 事件 不起作用 拖动      更新时间：2023-09-26

编辑：为了知识起见，我仍然想知道这个问题的答案。不过，我设法在drop事件中使用out事件获得了与我想要的效果类似的效果。

我有一个工作拖放，它会记录图像被放置在哪个框中。然而，当我创建一个拖动事件来说明用户从框中删除图像时，它会中断拖放，导致图像无法被提取。

下面两个代码部分之间的唯一区别是后者添加了CCD_ 1及其相关的写"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; 
}

您需要将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); }
  });
}
相关文章：