jquery - 使用 a 将图像附加到另一个图像上并获取坐标，使其可拖动和删除-6ren

jquery - 使用 a 将图像附加到另一个图像上并获取坐标，使其可拖动和删除

转载作者：行者123 更新时间：2023-12-01 05:58:22

25

4

在此处输入代码在此处输入代码`好的，这样我就有了一个图像，我将在单击按钮时将另一个图像附加到它上面。图像附加，我得到了位置的坐标。我还使用jquery ui 制作了图像draggalbe。每次附加图像时，还会生成一个 div，其中包含单击的图像的坐标和区域。在新生成的 div 中，有一个删除按钮可以删除该分区。我需要使该删除按钮也删除与该 div 对应的附加的特定图像。我非常感谢任何有关这方面的帮助，谢谢。

<!DOCTYPE html>
<html>
    <head>
                <meta charset="utf-8" />
                    <title>MyMapImage</title>
                <style type="text/css">
                    #container {
                        background: green;
                        width: 596px;
                        height: 218px;
                        position: relative;
                        cursor: crosshair;

                    }
                    #container img {
                        position: absolute;  
                            opacity:0.95;
                    }

                    #container img.cross {
                        position: absolute;  

                    }
                </style>
                <style type="text/css">
        #draggable {font-size:x-large; border: thin solid black; width: 5em; text-align: center}
    </style>



                <script type="text/javascript">
                    $(document).ready(function() {
                    $(".WindSh").click(function(e) {
                        e.preventDefault();
                        var x = e.pageX - this.offsetLeft;
                        var y = e.pageY - this.offsetTop;
                        var img = $('<img>');
                        img.css('top', y-23);
                        img.css('left', x-23);
                        img.attr('src', 'cross.png');
                        img.attr('class','cross');
                        img.appendTo('#container');
                        img.draggable({
                        containment: "parent"
                        });
                    })

                });
                </script>
                <script type="text/javascript">

                    $(document).ready(function() {
                      $('.WindSh').click(function(e) {
                        var offset = $(this).offset();
                        var xz= e.clientX - this.offsetLeft;
                        var yz= e.clientY - offset.top;

                        if (parseInt(xz)>= 38 && parseInt(xz)<=200 && parseInt(yz)>=15 && parseInt(yz)<=98)
                        {
                        $('<div/>').append((xz) + ", " + (yz) + " ; " + "You have selected Region 1")
                        .appendTo('#coordinates');    
                        }
                        else if (parseInt(xz)> 200 && parseInt(xz)<=401 && parseInt(yz)>=15 && parseInt(yz)<=98)
                        {
                        $('<div/>').append ((xz) + ", " + (yz) + " ; " + "You have selected Region 2")
                        .appendTo('#coordinates');

                        }
                        else if (parseInt(xz)> 401 && parseInt(xz)<=540 && parseInt(yz)>15 && parseInt(yz)<=98)
                        {
                        $('<div/>').append ((xz) + ", " + (yz) + " ; " + "You have selected Region 3")
                        .appendTo('#coordinates');
                        }
                        else if (parseInt(xz)> 12 && parseInt(xz)<=200 && parseInt(yz)>98 && parseInt(yz)<=186)
                        {
                        $('<div/>').append ((xz) + ", " + (yz) + " ; " + "You have selected Region 4")
                        .appendTo('#coordinates');
                        }
                        else if (parseInt(xz)> 200 && parseInt(xz)<=401 && parseInt(yz)>98 && parseInt(yz)<=186)
                        {
                        $('<div/>').append ((xz) + ", " + (yz) + " ; " + "You have selected Region 5")
                        .appendTo('#coordinates');
                        }
                        else if (parseInt(xz)> 401 && parseInt(xz)<=540 && parseInt(yz)>98 && parseInt(yz)<=186)
                        {
                        $('<div/>').append ((xz) + ", " + (yz) + " ; " + "You have selected Region 6")
                        .appendTo('#coordinates');
                        }   
                      });
                    });
                </script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.hide').click(function(){
            $('.cross').hide();
            });
        });
    </script>

    </head>
    <body
    <div id="container"><img class="WindSh" src="WindShield.png"></div>
    <div>Coordinates x,y: <span id="coordinates"></span></div>
    <input type="button" class="hide" value="hide">

    </body>
</html>

最佳答案

所以我必须将此图像 x 附加到另一个图像 y 之上。图像 x 应该给出附加到图像 y 上的坐标。第二，当附加图像 x 时，它会打开另一个 div，其中显示附加图像 x 的坐标。在该 div 中还有一个删除按钮。删除按钮当前删除该行，但我也希望该删除按钮删除与该 div 对应的附加图像。谢谢

关于jquery - 使用 a 将图像附加到另一个图像上并获取坐标，使其可拖动和删除，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13243999/

25

4

0

文章推荐： docker - 使用 gcsfuse 在 docker 容器中挂载谷歌云存储桶

文章推荐： php - 通过ajax加载facebook内容

文章推荐： jquery - 使用数据表(或替代插件)的日历 View ？

拖动 gridstack 卡时滚动内容
我正在使用 gridstack 来显示我的小部件。拖动和调整大小适用于 gridstack 卡，但当我将卡拖到底部时，卡的容器不会滚动。我想在拖动卡片时滚动那个容器。该容器只是一个 div 元素，所有
Flutter:使用手势检测器禁用多点触控/拖动
我目前正在构建一个多个处理的 slider 小部件，并且目前正在实现手势检测器。我有一个问题，如果您用第二根手指触摸/拖动屏幕，检测器会识别它并调用 onDragUpdate 函数，这是我试图禁用的功
AngularJS ng 拖动
我是 AngularJS 的新手，我对当前的项目有点压力，这就是我在这里问的原因。我看到 AngularJS 有 ng-dragstart 事件( http://docs.ng.dart.ant.c
JavaScript 图像缩放和平移(拖动)
关于缩放大图像和平移有什么建议吗？最好内联在页面上。我一直在使用PanoJS(又名GSV2)，但是现在越来越多的人使用iPhone/iPad/Android类型的设备，这个库要么太慢，要么旧版本不支
java - 拖动 JPanel
我在尝试拖动 JPanel 时遇到问题。如果我纯粹在 MouseDragged 中将其实现为: public void mouseDragged(MouseEvent me) { me.getS
android - 拖动/移动后将按钮移回原点
我有一个需要与屏幕底部对齐的 ImageButton，当我单击并拖动它时，它会随着我的手指移动一定距离，超过该距离它不会远离原点，而是继续跟随我的手指从原点开始的方向。当我松手时，按钮必须滑回原点。
android - 拖动 TextView
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 9 年前。 Improve this qu
android - 拖动，缩放没有矩阵android的imageview
我需要一个解决方案来实现拖动和缩放，在不使用矩阵的情况下围绕屏幕 onTouch 事件路由 ImageView。我搜索了很多但所有答案都是用矩阵完成的，因为我在屏幕矩阵中有多个对象不适合我，我想拖动和
ios - 拖动 UIView
我需要一些帮助来拖动 UIView 以显示主视图下方的菜单 View 。我有两个 UIView。menuView - 包括菜单按钮和标签和 mainView - 位于 menuView 之上。我
javascript - 谷歌地图即使在实现后也不可拖动/拖动
谷歌地图即使设为 true 也不可拖动/拖动。重现步骤:在新选项卡中加载带有 map 的页面，检查并在不执行任何操作的情况下转到移动 View 。现在在移动 View 中左右上下拖动 map ，它将
Android在ImageView上缩放、拖动、绘制
我在绘制和缩放 ImageView 时遇到问题。请帮帮我.. 当我画一些东西然后拖动或缩放图像时 - 绘图保留在原处，如您在屏幕截图中所见。而且我只需要简单地在图片上绘图，并且可以缩放和拖动这张图片。
c# - 尝试模拟鼠标点击/拖动
所以我试图模拟鼠标左键单击和鼠标左键释放来执行一些自动拖放操作。它目前在 C# Winforms(是的，winforms :|)中并且有点笨拙。基本上，一旦发送了点击，我希望它根据 Kinect
html5 - 拖动 Canvas
我有一个巨大的 HTML5 Canvas，我希望它像谷歌地图一样工作:用户可以拖动它并始终只看到它的一小部分(屏幕大小)。它只呈现您在屏幕上可以看到的部分。我该怎么做？你有想法吗？最佳答案 2 个简
javascript - 如何为触摸和鼠标(拖动)事件制作可拖动元素
我有以下拖放应用程序代码，它在桌面上按预期工作，但是当我想在移动设备上使用该应用程序时，拖动事件无法按预期工作。我知道触摸事件是必需的，但我不确定如何设置它们和实现这些功能。 .object
reactjs - 禁用或启用 map 拖动
我正在使用 react-leaflet map ，我用状态改变了很多 map 属性，但是当使用状态来改变拖动属性时它不起作用。 { this.map = map}}
geometry - 拖动/移动多个选定功能-OpenLayers
我知道我可以轻松地允许用户在OpenLayers中选择多个功能/几何图形，但是随后我希望使用户能够轻松地同时拖动/移动所有选定的功能。使用ModifyFeature控件一次只能移动一个要素...是否
拖动 map 时MapControl Xaml元素滞后
我有一个 Windows Phone 运行时应用程序，我使用 xaml 在 map 上显示图钉。当我拖动 map 时，控件试图保持在相同位置时会出现一些滞后。任何帮助，将不胜感
jquery - 滚动可拖动项目的内容时禁用 jQuery 拖动
我通常不会提出此类问题/答案，但我想我会这样做，因为我已经看到这个问题被问了 20 多次，但没有一个答案真正有效。简而言之，问题是，如果您在可拖动 jQuery 项目内的任何位置有可滚动内容(over
uicollectionview - 拖动 UICollectionViewCell 时如何实现透明背景或圆角
我确信一定有一种简单的方法可以做到这一点，但到目前为止，我已经花了很长时间在各种兔子洞中没有成功。我有一个支持拖放的 Collection View 。被拖动的单元格有 UIImageView在 c
delphi - 虚拟 TreeView 拖动
如何在两个virtualtreeview之间复制以复制所有列，而不仅仅是第一列？复制前：复制后：最佳答案树控件不保存任何数据。它不包含要显示的列数据，因此无法复制它。而是，当树控件想要显示任何

首页

博学

6Ren·AI

商城

jquery - 使用 a 将图像附加到另一个图像上并获取坐标，使其可拖动和删除