在另一個給出的座標上添加一個div

我想在另一個div中輸入由輸入文本字段給出的座標。增加的跨度應該與父母的同事有相對的位置。問題是它沒有添加任何東西，但它改變了畫布的位置。在另一個給出的座標上添加一個div

<html> 
<head> 
<style> 
    #rectangle { position: relative; } 
</style> 
<body> 
    300 x 300 px MAX<br/> 
    <canvas id="rectangle" width="300" height="300"></canvas> 
    <br/> 
    <table> 
    <tr> 
     <td>Horizontal starting cordinate:</td> 
     <td><input type="text" id = "x" value = ""/></td> 
    </tr>  
    <tr> 
     <td>Vertical starting cordinate:</td> 
     <td><input type="text" id = "y"/></td> 
    </tr> 
    <tr> 
     <td>Width of the rectangle:</td> 
     <td><input type="text" id = "width"/></td> 
    </tr> 
    <tr> 
     <td>Height of the rectangle:</td> 
     <td><input type="text" id = "height"/></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td><input type="button" id = "draw" value = "Click"/></td> 
    </tr> 
</table> 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function(){ 
    $("#draw").click(function(e){ 

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

     var x1 = parseInt($("#x").val()); 
     var y1 = parseInt($("#y").val()); 
     var width = parseInt($("#width").val()); 
     var height = parseInt($("#height").val()); 

     $("#rectangle") 
      .add("div") 
      .css("id", "right-zone") 
      .css("z-index", "5") 
      .css("position", "absolute") 
      .css("left", x1) 
      .css("top", y2) 
      .css("width", width) 
      .css("height", height) 
      .css("background-color", "#FF0000") 
      .css("border", "solid red 1px"); 
    }); 
}) 
</script>

任何想法有什麼不對？

來源

2013-04-03 Bor

你能提供一個jsfiddle來看看這個例子嗎？ – a0viedo

http://jsfiddle.net/qsFmf/ – Bor

你的代碼中有一些「bug」，包括html和JS。

這裏是一個工作示例：http://jsfiddle.net/kGd2G/1/

即使用div代替canvas

<div id="rectangle" style="width: 300px; height: 300px;"></div>

爲了簡化JS，我用了一個「模板格」設置一些默認值將被添加的矩形。

來源

2013-04-03 14:16:00 Floremin

您應該使用.append()而不是.add()。 .add()不會將div添加到DOM，而是將元素添加到一組匹配的元素。

編輯：關於第二個想法，我看到你正試圖追加一個div到畫布元素。您可能感興趣的檢查this，其中指出：

canvas元素的內容，如果有的話，元素的後備內容。

所以你應該用div來替換你的canvas元素。那或者編輯你的問題以更好地反映這個細節。

來源

2013-04-03 13:57:34 excentris

在另一個給出的座標上添加一個div

回答

相關問題