Повторно отобразить значение в текстовом поле при нажатии на маркер изображения - PullRequest
Новая
       5

Повторно отобразить значение в текстовом поле при нажатии на маркер изображения

0 голосов
/ 18 января 2020 
<script type = "text/javascript" >
    $(document).ready(function() {
        $("#<%= imagehs.ClientID %>").on("click", function(event) {
            $("#textboxX").html("");
            $("#textboxY").html("");
            $("#textboxBPart").html("");
            $("#divSaveDynamicDis").html("");
            var values = new Array();

            //var x = event.pageX - this.offsetLeft;
            //var y = event.pageY - this.offsetTop;

            var x = event.pageX;
            var y = event.pageY;
            //$(".marker").remove();
            $("body").append(
                $('<div class="marker"></div>').css({
                    position: 'absolute',
                    //top: y + 'px',
                    //left: x + 'px',
                    top: event.pageY + 'px',
                    left: event.pageX + 'px',
                    width: '10px',
                    height: '10px',
                    background: '#dd4b39',
                    'border-radius': '10px'
                })
            );
            $("#textboxX").append('<div><input type="text" value="' + x + '" id="txtX" name="txtX"/></div>');
            $("#textboxY").append('<div><input type="text" value="' + y + '" id="txtY" name="txtY"/></div>');
            $("#textboxBPart").append("<div><input type='text' id='txtName' name='txtName'/></div>");
            var $r = $('<button />', {
                type: 'button',
                text: 'Refresh Data',
                id: 'btn_refresh'
            });
            $("#divSaveDynamicDis").append($r);
            $r.on('click', function() {
                var NewData = '<div class="col-sm-12">' + x + '   ' + y + '  ' + txtName.value + '</div>';
                $("#divdynamicData").append(NewData);
                $("#textboxX").html("");
                $("#textboxY").html("");
                $("#textboxBPart").html("");
                $("#divSaveDynamicDis").html("");
            });

        });
    }); 
</script>

image

1) Теперь, как вы можете видеть на изображении, когда я нажимаю на изображение, мне разрешено добавлять детали изображения, такие как X, Y , И название части тела

2) В правой части изображения я хочу, чтобы, когда вы нажимаете на МАРКЕР изображения, я хочу отобразить это конкретное X, Y, Имя части тела в TEXTBOX. вместо текста и также хочу кнопку ОБНОВИТЬ, чтобы пользователь мог изменить ИМЯ, а также, если использовать DRAG THE MARKER в другом месте, тогда я хочу, чтобы значение XY обновлялось в то же время, когда пользователь USER перетаскивает изображение ...

...