在另一個圖像上添加一個圖像並獲取座標，使其可以拖動和刪除

在這裏輸入代碼hereenter代碼`ok所以我有一個圖像，我做了另一個圖像追加到它點擊一個按鈕。圖像附加，我得到的位置的座標。我也使用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>

來源

2012-11-06 user1801879

我恐怕你的問題有點難以理解，你能否嘗試更清楚地解釋它？ – zeel