Drag & Drop

by Graham Walters

HTML

<div class="drag" id="seat" draggable="true">Hi</div>
<div id="seats">
    <div>
        <div class="box">
            <div class="drag" id="index" draggable="true">bye</div>
        </div>
    </div>
</div>

CSS

#seats {
    width: 200px;
    height: 200px;
    border: #000 solid 1px;
    margin: 20px;
    display: block;
}
.box {
    width: 50px;
    height: 50px;
    border: #000 solid 1px;
    margin: 20px;
}
#seat {
    display: inline-block;
    padding: 5px;
    background: #ADD;
}

JavaScript

var drag = null;

$('.drag').bind('dragstart', function (e) {
    drag = {
        "id": e.target.id,
            "background": $(e.target).css('background')
    };
});

$('body').bind('drop', function (e) {

    if (drag && drag.id == 'seat' && $('#seats').has(e.target).length > 0) {
        console.log('seat');
        if (e.preventDefault) e.preventDefault();
        if (e.stopPropogation) e.stopPropogation();
        $('#seats').css('background', drag.background);
    } else if (drag && drag.id == 'index' && !$('#seats').has(e.target).length > 0) {
        console.log('index');
        if (e.preventDefault) e.preventDefault();
        if (e.stopPropogation) e.stopPropogation();
        $('#seats').css('background', 'none');
    }

});

$('body').on('dragover', function (e) {
    e.preventDefault();
});