ขั้นตอนการทำงาน เมื่อผมคลิกที่บล็อคตำแหน่ง CF ก็จะ show popup ขึ้นมาให้เลือกนักเตะ เมื่อคลิกเลือกนักเตะแล้ว กดตกลง รูป ชื่อ ตำแหน่ง เบอร์เสื้อ ของนักเตะจะลงแทนตำแหน่งบล็อคครับ
ตอนนี้สามารถทำได้ คือ แสดง ตำแหน่ง ชื่อเบอร์ ครับ แต่ไม่รุ้ว่าจะทำรูปมาแสดงยังไงครับ
code ส่วนแสดงตำแหน่ง block
โค้ด: เลือกทั้งหมด
<div class="drag-container" align="center" >
<?php
$sql_opt_position = "SELECT * FROM $datalineup_position WHERE plan_id = 1 ";
$result_opt_position = mysqli_query($con,$sql_opt_position);
while ($rowposition = mysqli_fetch_assoc($result_opt_position)) { ?>
<div class="draggable" id="po_<?php echo $rowposition['pst_posit']; ?>"
style="transform: translate(<?php echo $rowposition['pst_x'].'px'; ?> ,
<?php echo $rowposition['pst_y'].'px'; ?>);"
data-x="<?php echo $rowposition['pst_x']; ?>"
data-y="<?php echo $rowposition['pst_y'];?>" >
<p id="shw_nameply" > <?php echo $rowposition["pst_name"]; ?></p>
<div class="showplayer"></div>
<input type="hidden" class="setplayer" >
</div>
<?php } ?>
</div>
โค้ด: เลือกทั้งหมด
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<form method="post" action="" name="form">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><?php echo $rowposition["pst_name"]; ?></h4>
</div>
<?php
$sql_play = "SELECT * FROM $datalineup_player WHERE team_id = 1 ";
$rstplay = mysqli_query($con,$sql_play);
?>
<div class="modal-body">
<select class="selectpicker" id="name_player" name="">
<?php while ($r_play = mysqli_fetch_assoc($rstplay)) {
$langplayname = ($lang=='th') ? $r_play['play_name_th'] : $r_play['play_name_en']; ?>
<option value="<?php echo $r_play['play_id']; ?>" data-thumbnail="player_image/<?php echo $r_play['play_img'];?>" >
<span> <?php echo $langplayname; ?></span>
<span><?php echo $r_play["play_num"]; ?></span> </option>
<?php } ?>
</select>
<input type="hidden" id="blockid">
</div>
<div class="modal-footer">
<a class="btn btn-primary submit_popup" >Submit</a>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</form>
</div>
</div>
ส่วน javascript
โค้ด: เลือกทั้งหมด
$(document).ready(function(){
$('.draggable').click(function(){
$('#myModal').modal('show');
$('#blockid').val($(this).attr('id'));
});
$('.submit_popup').click(function(){
var selvalue = $('.selectpicker').val();
var blockid = $('#blockid').val();
$('#'+blockid+' .setplayer').val(selvalue);
$('#'+blockid+' .showplayer').html($('.selectpicker option:selected').text());
$('.selectpicker option:selected').attr('disabled',true);
$('#myModal').modal('hide');
});
});