HTML - Drag & Drop elements

  • DRAG & DROP 事件处理
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("DragDropItem", ev.target.id);
}
  
function drop(ev) {
    var obj = $(`#${ev.dataTransfer.getData("DragDropItem")}`)
    if ($(ev.target).hasClass('dragdrop-item')) {
        obj.appendTo($(ev.target).parent())
    }
    else {
        obj.appendTo($(ev.target))
        ev.preventDefault();
    }
}
  
$(document).ready(function() {
    $('.dragdrop-item').attr('draggable', true)
    $('.dragdrop-item').attr('ondragstart', 'drag(event)')
    $('.dragdrop-panel').attr('ondrop', 'drop(event)')
    $('.dragdrop-panel').attr('ondragover', 'allowDrop(event)')
})
  • View
<div class="panel-body">
    <div class="col-md-6">
        <div class="alert alert-dismissible dragdrop-panel" style="border:1px solid red" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <strong>Group1</strong>
            <hr />
            <div id="dragdrop-item-1" class="alert alert-success alert-dismissible dragdrop-item" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <strong>Item1</strong>
            </div>
            <div id="dragdrop-item-2" class="alert alert-success alert-dismissible dragdrop-item" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <strong>Item2</strong>
            </div>
            <div id="dragdrop-item-3" class="alert alert-success alert-dismissible dragdrop-item" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <strong>Item3</strong>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="alert alert-dismissible dragdrop-panel" style="border:1px solid blue" role="alert">
            <strong>Group2</strong>
            <hr/>
            <div id="dragdrop-item-4" class="alert alert-success alert-dismissible dragdrop-item" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <strong>Item4</strong>
            </div>
            <div id="dragdrop-item-5" class="alert alert-success alert-dismissible dragdrop-item" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <strong>Item5</strong>
            </div>
            <div id="dragdrop-item-6" class="alert alert-success alert-dismissible dragdrop-item" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <strong>Item6</strong>
            </div>
        </div>
    </div>
</div>
Live Demo »