Drag and Drop

by Nikolay Petrov

HTML

<div id="d1" class="drop"></div>

<div id="d2" class="drop"></div>

<div>
    <span>Традиционное (аграрное)</span>
    <span>Индустриальное</span>
    <span>Информационное (постиндустриальное)</span>
</div>

CSS

.drop { margin: 10px; width: 200px; height: 100px; border: 1px solid green; }
.highlight { background-color: green; }
.hover { background-color: red; }

span {display:block;border:1px solid gray; padding:10px 20px; margin-bottom:20px;border-radius:3px;background:white;}

JavaScript

$("#d1").droppable({
    activeClass: "highlight",
    hoverClass: "hover",
    drop: function( event, ui ) {
    alert('sfsf');
        $(this).html( 'aslfkjasl fkjsa f|' );
        //$(this).html( $(this).html() + ui.draggable.data('name') + '|' );
    }
});

$("span").draggable({
    cursor: 'move',
    revert: true
});