Plan: Tabelle

by dirkk0

HTML

<script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
    <table>
        <div class="left">
            <table></table>
        </div>
        

        <div class="demo-info" style="margin-bottom:10px">
            <div class="demo-tip icon-tip">&nbsp;</div>
            <div>Klicken,  ziehen Sie eine Stunde und einsetzen, wohin Sie möchten.</div>
        </div>
        <div style="width:700px;">
            <div class="left">
                <table>
                    <tr>
                        <td>
                            <div class="item">Englisch</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="item">Chemie</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="item">Latein</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="item">Französisch</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="item">Mathe</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="item">Deutsch</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="item">Philosophie</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="item">Sport</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="item">Biologie</div>
                        </td>
            ...

CSS

.left{
			width:120px;
			float:left;
		}
		.left table{
			background:#E0ECFF;
		}
		.left td{
			background:#eee;
		}
		.right{
			float:right;
			width:570px;
		}
		.right table{
			background:#E0ECFF;
			width:100%;
		}
		.right td{
			background:#fafafa;
			color:#444;
			text-align:center;
			padding:2px;
		}
		.right td{
			background:#E0ECFF;
		}
		.right td.drop{
			background:#fafafa;
			width:100px;
		}
		.right td.over{
			background:#FBEC88;
		}
		.item{
			text-align:center;
			border:1px solid #499B33;
			background:#fafafa;
			color:#444;
			width:100px;
		}
		.assigned{
			border:1px solid #BC2A4D;
		}
		.trash{
			background-color:red;
		}

JavaScript

$(function(){
			$('.left .item').draggable({
				revert:true,
				proxy:'clone'
			});
			$('.right td.drop').droppable({
				onDragEnter:function(){
					$(this).addClass('over');
				},
				onDragLeave:function(){
					$(this).removeClass('over');
				},
				onDrop:function(e,source){
					$(this).removeClass('over');
					if ($(source).hasClass('assigned')){
						$(this).append(source);
					} else {
						var c = $(source).clone().addClass('assigned');
						$(this).empty().append(c);
						c.draggable({
							revert:true
						});
					}
				}
			});
			$('.left').droppable({
				accept:'.assigned',
				onDragEnter:function(e,source){
					$(source).addClass('trash');
				},
				onDragLeave:function(e,source){
					$(source).removeClass('trash');
				},
				onDrop:function(e,source){
					$(source).remove();
				}
			});
		});