拖动事件不起作用 - 防止拖放
问题描述:
编辑:为了知识的缘故,我仍然想知道这个问题的答案。尽管我在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;
}
答
您需要在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); }
});
}