Witam, mam problem ponieważ przenoszę elementy między dwoma kontenerami (drag and drop) i gdy wrzucam do tego drugiego to chce by mi się otworzyło okienko modalne i zmienić wtedy wartości. Problem polega na tym że nie wiem jak to zrobić. Mój kod zamieszczam poniżej. Proszę o pomoc
<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;
display: none;
}
.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">
$(function(){
//$('tbody').sortable();
var speed = "1000";
$('.container-project').slideUp();
$(document).ready(function(){
$('.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);
}
});
});
</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>