jQuery: drag and drop

by Nikolay Petrov

HTML

5) Установите соответствие между отличительными признаками и типами
<div class="left col">
  <div><span>А) Развитие высоких технологий </span><p class="ph"></p></div>
  <div><span>Б) Механизация промышленного производства</span><p class="ph"></p></div>
  <div><span>В) Выдвижение на первый план сферы услуг</span><p class="ph"></p></div>
  <div><span>Г) Натуральный характер хозяйства</span><p class="ph"></p></div>
  <div><span>Д) Общинный уклад, коллективизм</span><p class="ph"></p></div>
</div>
<div class="right col">
  <div data-name='Традиционное (аграрное)'>Традиционное (аграрное)</div>
  <div data-name='Индустриальное'>Индустриальное</div>
  <div data-name='Информационное (постиндустриальное)'>Информационное (постиндустриальное)</div>
</div>

CSS

p {margin:0;}
body {font-size:13px;font-family:arial;background:#ddd;}
.left {float:left;width:450px;margin-right:30px;}
.right { float:left;}
.left div {padding:12px 12px 10px;diaplay:block;overflow:hidden;border:1px solid gray; background:white;margin:15px 0 15px 10px;border-radius:3px;}
.left div span {display:inline-block;width:200px;}
.ph {width:170px;min-height:50px;border:2px solid white;margin-left:20px;float:right;padding:0 10px;}
.right div,
.left div p p {background:#e6f5de;padding:5px 10px;border-radius:3px;border:1px solid #ccc}
.right div {width:150px;padding:5px 10px; margin:20px 5px 20px;border-radius:3px;}
.over .ph {border:2px dashed #bbb;border-radius:4px;background:#f1f1f1;background:#FFF5D3;}
.shadow {box-shadow:5px 5px 17px rgba(0,0,0,0.1);}

JavaScript

$(document).ready(function () {
    $('.left div').droppable({
        drop: function ( event, ui) {
            $('#draggable').animate({
                opacity: 0.5
            }, 1000).remove();
						$(this).find('p').html('<p>'+ui.draggable.data('name')+'</p>');
        }
    });
    
    $('.right div').draggable({
        cursor: 'move',
        //revert: false,
        //helper: "clone",
        helper:function() {
        var helper = $(this).clone(); // Untested - I create my helper 
        //helper.css({'width': '462px', 'height': '300px'});
        helper.addClass('shadow');
        return helper;
    },
				revert: "invalid",
        start: function (ui) {
        		//$(ui.helper).addClass('shadow');
            //$(this).css({opacity: '0.5'});
        },
        over: function (event, ui) {
            $( this ).addClass( "over" );
        },
        stop: function () {
        $(".left div").removeClass("over");
        		//$(this).remove();
            //$(this).css({opacity: '0'});
            //$(this).animate({opacity: '1'}, 200);
        }
    });
$(".left div").on("dropover", function(e) {
    $(this).addClass("over");
});
$(".left div").on("dropout", function (e){
    $(this).removeClass("over");
    currentDraggedElement = null;
});

});