2012-10-25 118 views
0

我正在開發一種基於web的地圖編輯器,我正在使用JQuery和jQuery-ui。我主要使用後者來使對象可拖動。 當用戶點擊一個按鈕時,會在默認位置創建並插入對象。當對象被創建時,我使它可拖動。JQuery-ui:元素失去「可拖動性」

會發生什麼事情是,如果我創建了2個或更多的重疊對象,我只能拖動頂部的那個,其他的則會丟失它們的可拖動性。 如果我添加這些對象,並將它們移動到某個地方,然後讓它們重疊,則不存在任何問題,我仍然可以將它們拖到我想要的位置。 只有當對象重疊時纔會出現問題。

這是我寫的代碼。

<html> 
    <head> 
<script type="text/javascript" src="wz_jsgraphics.js"></script> 
<script type="text/javascript" src="jquery-1.8.2.js"></script> 
<script type="text/javascript" src="jquery-ui-1.8.24.custom.min.js"></script> 

<script type="text/javascript"> 
    var lastNodeId; 

    $(function() { 
     lastNodeId = 0; 
     $("#nodeButton").click(addNode); 
    }); 


    function addNode() { 
     var id = "node" + lastNodeId; 

     $("#drawArea").append("<div id=\"" + id + "\" class='node'></div>"); 

     var jg = new jsGraphics(id); 
     jg.setColor("#000000"); 
     jg.drawImage("pc_icon.png", 50, 50, 50, 50); 
     jg.paint(); 

     var idImg = "img" + lastNodeId; 
     $("#" + id + " img").attr("id", idImg); 

     lastNodeId++; 
     $("#" + idImg).draggable(); 

} 

</script> 
</head> 

<body> 
    <button type="button" id="nodeButton">Aggiungi Nodo</button> 
    <div id="drawArea"> </div> 
</body> 
</html> 

我用JSGraphics只是在頁面上畫一個圖標,它可以在http://www.walterzorn.de/en/jsgraphics/jsgraphics_e.htm找到。 我真的很希望有人能幫助我理解發生了什麼事以及我做錯了什麼! :)

更新

我試圖添加的下一個對象在不同的​​地方。我發現如果與前一個添加對象的距離至少爲17px,那麼底部不會失去可拖動性。 不管我是否修改x或y參數,它至少只有17px。

回答

1

嘗試更換你的下面的代碼:

$("#" + id + " img").attr("id", idImg); 

lastNodeId++; 
$("#" + idImg).draggable(); 

這一個:

$("#" + id + " img").attr("id", idImg).draggable(); 
lastNodeId++; 

,因爲它可能是新的id集不會更新DOM如此之快,jQuery的抓住它。

更新
如果你:

lastNodeId++; 
console.log('im len: '+$("#" + idImg).length); 
$("#" + idImg).draggable(); 

什麼呢控制檯打印?它可能是圖像尚未創建,請查看jqGraphics是否在創建圖像時回調。

+0

我剛剛試過你的建議,但沒有成功:( 這是有道理的,但我甚至試圖等待幾秒鐘之間的一個點擊按鈕和另一個和底部的元素仍然不能被拖動:( – giocarmine

+0

我更新了我的答案,進一步的調試,你可以做..也可以給你使用的jqGraphics庫的URL? – Nelson

+0

我試過了,在控制檯它總是寫「im len:1 「 我已經更新了我的問題,你認爲圖形庫可能會導致一些麻煩? – giocarmine

相關問題