gonaumov · August 11, 2017 13:48
diff --git a/jQueryDragable.html b/jQueryDragable.html
 <html>
 <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" />

    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <style type="text/css">
        .content .container-project{
            border:1px solid blue;
            margin:40px;
        }
        .content .list-employee{
            border:1px solid green;
            margin:40px;
        }
        .draggable{
            filter: aplha(opacity=60);
            opacity:0.9;

        }
        .dropped{
            position:static !important;
        }

        .list-employee, .container-project{
            border:5px solid #ccc;
            padding: 5px;
            min-height:100px;
            width:430px;
        }

        tr{
            color:black;
            display:block;
            cursor:pointer;
            height:30px;
        }

    </style>
 </head>
 <body style="width:900px;">
 <div class="content" style="border:2px solid black">
    <div class="list-employee">
        <table>
            <thead>
            <tr>
                <th>Name</th>
                <th>Platform</th>
                <th>Free FTE</th>
            </tr>
            </thead>
            <tbody>
            <tr id="id-1">
                <td>Karol Nowak</td>
                <td>.NET</td>
                <td>0.5</td>
            </tr>
            <tr id="id-2">
                <td>Jan Dawidowicz</td>
                <td>Java</td>
                <td>1</td>
            </tr>
            </tbody>
        </table>
    </div>

    <div class ="project-list">
        <div class="q">
            Project1
        </div>
        <div class="container-project">
            <table>
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Platform</th>
                    <th>Free FTE</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>

        <div class="q">
            Project2
        </div>
        <div class="container-project">
            <table>
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Platform</th>
                    <th>Free FTE</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>

    </div>
 </div>

 <script type="text/javascript">
    var speed = "1000";

    $(function(){
        //$('tbody').sortable();
        $('.container-project').slideUp();
        $('.q').on('click',function(){
            $(this).next().slideToggle(speed)
        });

        $('.list-employee table tbody tr').draggable({
            helper:"clone",
            refreshPositions: true,
            drag: function(event, ui){
                ui.helper.addClass("draggable");
            },
            stop: function(event, ui){
                ui.helper.removeClass("draggable");
            }
        });

        $(".container-project").droppable({
            drop: function (event, ui){
                $("#myModal").modal('show');
                var i =0;
                $('#myModal [data-agecheck=submit2]').on('click', function() {
                    var i=$('select[name=guzik]').val();
                    alert(i);
                    console.log(i);
                    $("#myModal").modal('hide');
                });

                var myval = jQuery(this).data(ui.draggable);
                console.log(this);

                ui.draggable.addClass("dropped");
                $(this).append(ui.draggable);
            }
        });
    });

    $(document).on('dragstart', function () {
        if($('.container-project').is(':visible') === false) {
            $('.container-project').slideToggle(speed);
        }
    });
 </script>

 <!-- Przycisk uruchamiający modal -->
 <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Uruchom okienko Pop-up
 </button>

 <!-- Modal -->
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Zamknij</span></button>
                <h4 class="modal-title" id="myModalLabel">Podaj ilosc</h4>
            </div>
            <div class="modal-body">
                <select name="guzik" multiple class="form-control">
                    <option value="0">0</option>
                    <option value="0.25">0.25</option>
                    <option value="0.5">0.5</option>
                    <option value="0.75">0.75</option>
                    <option value="1">1</option>
                    <option value="1.25">1.25</option>
                </select>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" data-agecheck="submit">Zamknij</button>
                <button type="button" class="btn btn-primary"  data-agecheck="submit2">Zatwierdz</button>
            </div>
        </div>
    </div>
 </div>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

 </body>
 </html>
	<html>
	<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
	<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" />

	<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
	<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
	<style type="text/css">
	.content .container-project{
	border:1px solid blue;
	margin:40px;
	}
	.content .list-employee{
	border:1px solid green;
	margin:40px;
	}
	.draggable{
	filter: aplha(opacity=60);
	opacity:0.9;

	}
	.dropped{
	position:static !important;
	}

	.list-employee, .container-project{
	border:5px solid #ccc;
	padding: 5px;
	min-height:100px;
	width:430px;
	}

	tr{
	color:black;
	display:block;
	cursor:pointer;
	height:30px;
	}

	</style>
	</head>
	<body style="width:900px;">
	<div class="content" style="border:2px solid black">
	<div class="list-employee">
	<table>
	<thead>
	<tr>
	<th>Name</th>
	<th>Platform</th>
	<th>Free FTE</th>
	</tr>
	</thead>
	<tbody>
	<tr id="id-1">
	<td>Karol Nowak</td>
	<td>.NET</td>
	<td>0.5</td>
	</tr>
	<tr id="id-2">
	<td>Jan Dawidowicz</td>
	<td>Java</td>
	<td>1</td>
	</tr>
	</tbody>
	</table>
	</div>

	<div class ="project-list">
	<div class="q">
	Project1
	</div>
	<div class="container-project">
	<table>
	<thead>
	<tr>
	<th>Name</th>
	<th>Platform</th>
	<th>Free FTE</th>
	</tr>
	</thead>
	<tbody>
	</tbody>
	</table>
	</div>

	<div class="q">
	Project2
	</div>
	<div class="container-project">
	<table>
	<thead>
	<tr>
	<th>Name</th>
	<th>Platform</th>
	<th>Free FTE</th>
	</tr>
	</thead>
	<tbody>
	</tbody>
	</table>
	</div>

	</div>
	</div>

	<script type="text/javascript">
	var speed = "1000";

	$(function(){
	//$('tbody').sortable();
	$('.container-project').slideUp();
	$('.q').on('click',function(){
	$(this).next().slideToggle(speed)
	});

	$('.list-employee table tbody tr').draggable({
	helper:"clone",
	refreshPositions: true,
	drag: function(event, ui){
	ui.helper.addClass("draggable");
	},
	stop: function(event, ui){
	ui.helper.removeClass("draggable");
	}
	});

	$(".container-project").droppable({
	drop: function (event, ui){
	$("#myModal").modal('show');
	var i =0;
	$('#myModal [data-agecheck=submit2]').on('click', function() {
	var i=$('select[name=guzik]').val();
	alert(i);
	console.log(i);
	$("#myModal").modal('hide');
	});

	var myval = jQuery(this).data(ui.draggable);
	console.log(this);

	ui.draggable.addClass("dropped");
	$(this).append(ui.draggable);
	}
	});
	});

	$(document).on('dragstart', function () {
	if($('.container-project').is(':visible') === false) {
	$('.container-project').slideToggle(speed);
	}
	});
	</script>

	<!-- Przycisk uruchamiający modal -->
	<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	Uruchom okienko Pop-up
	</button>

	<!-- Modal -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
	<div class="modal-content">
	<div class="modal-header">
	<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Zamknij</span></button>
	<h4 class="modal-title" id="myModalLabel">Podaj ilosc</h4>
	</div>
	<div class="modal-body">
	<select name="guzik" multiple class="form-control">
	<option value="0">0</option>
	<option value="0.25">0.25</option>
	<option value="0.5">0.5</option>
	<option value="0.75">0.75</option>
	<option value="1">1</option>
	<option value="1.25">1.25</option>
	</select>

	</div>
	<div class="modal-footer">
	<button type="button" class="btn btn-default" data-dismiss="modal" data-agecheck="submit">Zamknij</button>
	<button type="button" class="btn btn-primary" data-agecheck="submit2">Zatwierdz</button>
	</div>
	</div>
	</div>
	</div>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

	</body>
	</html>