Witam,
Mam taki kod:
<div class="modal fade" id="modalSubscriptionForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header text-center"> <h4 class="modal-title w-100 font-weight-bold">Subscribe
</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <div class="modal-body mx-3"> <div class="md-form mb-5"> <i class="fas fa-user prefix grey-text"></i> <input type="text" id="form3" class="form-control validate val1" name="val1"> <label data-error="wrong" data-success="right" for="form3">Title
</label> <div class="md-form mb-4"> <i class="fas fa-envelope prefix grey-text"></i> <input type="email" id="form2" class="form-control validate val2" name="val2"> <label data-error="wrong" data-success="right" for="form2">Desc
</label> <div class="md-form mb-4"> <i class="fas fa-envelope prefix grey-text"></i> <label data-error="wrong" data-success="right" for="form2"> Coordinates click:
x
<div class="modal-footer d-flex justify-content-center"> <button class="btn btn-indigo saveBtn">Send
<i class="fas fa-paper-plane-o ml-1"></i></button> <div class="scalize imgpo"> <img src="img/jacket.png" alt="" class="target "> <div class="item-point" data-top="130" data-left="300" id="point1"> <div><a href="#" class="toggle tooltips" title="<h1><b>Another
</b> <em>one
</em> here too 1
</h1>" data-placement="top" data-html="true" rel="tooltip">
</a></div> <div class="item-point" data-top="180" data-left="462" id="point2"> <div><a href="#" class="toggle tooltips" title="<h1><b>Another
</b> <em>one
</em> here too 2
</h1>" data-placement="top" data-html="true" rel="tooltip">
</a></div> <div class="item-point" data-top="380" data-left="215" id="point3"> <div><a href="#" class="toggle tooltips" title="<h1><b>Another
</b> <em>one
</em> here too 3
</h1>" data-placement="top" data-html="true" rel="tooltip">
</a></div> <div class="item-point" data-left="357" data-top="458" id="point4"> <div><a href="#" class="toggle tooltips" title="<h1><b>xxxxx
</b> <em>one
</em> here too 4
</h1>" data-placement="top" data-html="true" rel="tooltip">
</a></div> <a href="" class="btn btn-default btn-rounded mb-4 formAdd" data-toggle="modal" data-target="#modalSubscriptionForm" style="display:none"></a> <script type="text/javascript"> $(document).ready(function(){
$('.imgpo').click(function(e) {
var posX = $(this).position().left,posY = $(this).position().top;
$('.coorX').html((e.pageX - posX -10));
$('.coorY').html((e.pageY - posY -10));
$(".tooltip").tooltip("hide");
$('.formAdd').click();
});
$('.saveBtn').click(function(e) {
var val1 = $(".val1").val();
var val2 = $(".val2").val();
var values = {
'val1' : val1,
'val2' : val2
};
alert('Save');
$.ajax({
url: "save.php",
type: "post",
data: values ,
success: function (response) {
alert('Save');
},
error: function(jqXHR, textStatus, errorThrown) {
alert('Error');
}
});
});
$('.removeMe').on('click', function() {
var number = $(this).attr('id');
$('#point' + number).remove();
$('.obiect' + number).remove();
});
$('.scalize').scalize({
styleSelector: 'circle',
animationPopoverIn: 'flipInY',
animationPopoverOut: 'flipOutY',
animationSelector: 'pulse2'
});
/*
$('.tooltips').tooltip({
html: true,
trigger: 'click',
placement: 'top'
})
*/
const $tooltip = $('.tooltips');
$tooltip.tooltip({
html: true,
trigger: 'click',
placement: 'top',
});
$tooltip.on('show.bs.tooltip', () => {
$('.tooltip').not(this).remove();
});
$tooltip.on('click', (ev) => { ev.stopPropagation(); })
});
<form name="saveForm" action="#" method="post"> <div class="obiect1">Obiect 1
<div class="removeMe" id="1">X
</div> </div> <div class="obiect2">Obiect 2
<div class="removeMe" id="2">X
</div> </div> <div class="obiect3">Obiect 3
<div class="removeMe" id="3">X
</div> </div> <div class="obiect4">Obiect 4
<div class="removeMe" id="4">X
</div> </div>
<input type="submit" value="Save" />
Powyższy kod wyświetla punkty na obrazku. Pod obrazkiem mam możliwośc kasowania punktów ze strony internetowej i z obrazka. Po kliknięciu na obrazek wyświetla się tooltip (Bootstrap). Po kliknięciu na na tło obrazka wyświetla się formularz dodawania punktu na zdjęciu. W formularzu znajdują się wspórzędne klikniętego punktu. To działa poprawnie.
W jaki sposób można zrobić zapis nowego punktu na obrazku?
Aby punkt na obrazku należy dodać kolejny kod do HTML:
<div class="item-point" data-left="357" data-top="458" id="point4"> <div><a href="#" class="toggle tooltips" title="<h1><b>xxxxx
</b> <em>one
</em> here too 4
</h1>" data-placement="top" data-html="true" rel="tooltip">
</a></div>
<div class="obiect4">Obiect 4
<div class="removeMe" id="4">X
</div> </div>
W jaki sposób to zrobić?
Podgląd:
http://serwer1356363.home.pl/pub/component/index2.html
Ten post edytował trifek 14.01.2019, 09:55:56