Question

编辑：出于知识的考虑，我仍然想知道这个问题的答案。我设法在drop事件中使用out事件获得了类似的效果。

我有一个工作拖放功能，可以记录放置图像的方框。但是，当我创建一个拖动事件来解释用户从框中移除图像的事实时，它会打破拖放导致图像是不可剥离的。

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

您需要将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); }
  });
}

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

1 个答案: