Question

我正在使用HTML5来获取“DnD”功能我有一个按钮，我添加div 我希望能够将项目拖入此div 我可以拖入我的div列表，但不会添加到添加的内容中我该如何解决这个问题？

FIDDLE
http://jsfiddle.net/oxxqk7tj/

JS

//FlakNr
var flakNr = 1;

//Create flak
$('#btnAddFlak').on('click', function () {
//Flak HTML setup
var flak = $('<div class="flak nopadding dropZone"><div class="flakSideUp"></div><div class="flakMiddle">' + flakNr + '</div><div class="flakSideDown"></div></div><br>');

//Insert flak to flakDiv
$('#flakDiv').append(flak);

//Increase flakNr
flakNr++;

});



// This variable will hold the dragged item object
var dragSrcEl = null;

$('.dropZone').on('dragstart', '.elementDiv', function (e) {
e.stopPropagation();

// Add the CSS class to the element that is being dragged
// This allows to style that element
$(this).addClass('dragging');

dragSrcEl = this;

// Set data transfer object values
e.originalEvent.dataTransfer.effectAllowed = 'move';
e.originalEvent.dataTransfer.setData('text/html', $(this).html());

});

//The dragged element can be dropped on any other list item (let's call it the drop zone). Dragenter defines what happens when the dragged element enters the zone where it can be dropped:
$('.dropZone').on('dragenter', '.elementDiv', function (e) {
// Add the CSS class to the drop zone
// That way we can indicate the drop location to the user
$('.elementDiv').removeClass('over');
$(this).addClass('over');
});




//When the element leaves the drop zone, the dragleave event is fired:
$('.dropZone').on('dragleave', '.elementDiv', function (e) {
// Element is not a drop zone anymore – remove the CSS class
$(this).removeClass('over');
});

//The dragover event is triggered while the dragged element is in the drop zone:
$('.dropZone').on('dragover', '.elementDiv', function (e) {
// Prevent the default browser behavior
if (e.preventDefault) {
    e.preventDefault();
}
e.originalEvent.dataTransfer.dropEffect = 'move';
return false;
});



//When the dragging has stopped, we need to clean up the assigned CSS classes used for styling the element being dragged and the drop zones:
$('.dropZone').on('dragend', '.elementDiv', function (e) {

// Remove over and dragging CSS classes  
$(this).removeClass('dragging');
$('.elementDiv').removeClass('over');

});
//The event that contains most of the HTML5 drag and drop logic is the drop event, which is fired after the user drops the element (releases the mouse button):

$('.dropZone').on('drop', '.elementDiv', function (e) {

// Remove over and dragging CSS classes  
$(this).removeClass('dragging');
$('.elementDiv').removeClass('over');

// Stops the browser from redirecting
if (e.stopPropagation) {
    e.stopPropagation();
}

// Do the drop only if the dragged item and the drop zone are not the same elements
if (dragSrcEl != this) {
    // Set the dragged element HTML to the HTML of the item we have dropped on.
    $(dragSrcEl).html($(this).html());
    $(this).html(e.originalEvent.dataTransfer.getData('text/html'));
}

return false;

});

Answer 1

请注意，当您向DOM添加动态DIV时，您应该仅在创建时向新添加的div添加事件。应该在创建时将dragstart事件添加到新创建的div中。有关详细信息，请参阅此链接。

Adding Event Listener to dynamically created divs

谢谢！

不能放弃div

1 个答案: