jquery如何將圖釘添加到圖像並將位置保存到SQL

Question

如何鎖定圖像並保存圖釘的位置？

我發現this plugin，但我不知道如何保存這些引腳的位置。

這個想法就像谷歌地圖一樣，用戶可以在其中放置儘可能多的別針，並將這些別針位置保存到數據庫中;當他下次登錄時，他可以看到他把銷釘放在哪裏。

Answer 1

你可以得到這樣的節點的信息：

function getNodes(){ 
    var nodes = []; 
    $('img', $('#container')).each(function(){ 
     nodes.push([$(this).css('top'), $(this).css('left')]); 
    }); 

    $.post('save.php', {nodes: nodes}, function(data){}, 'json'); 
} 

然後節點的位置將是崗位save.php。

Answer 2

你可以使用jQuery鼠標位置來知道你添加了一個pin的位置，並將這些vars放到你的sql數據庫中。

$("#special").click(function(e){ 
     $('#imgId').html(e.pageX +', '+ e.pageY); 
    }); 

棘手的部分是讓jQuery的瓦爾到PHP（下面的參考資料） 所以你的SQL將會類似於這樣的：

USER_ID - pin_id - 位X - 位置▲

資源：

鼠標位置：http://docs.jquery.com/Tutorials:Mouse_Position

傳遞了jQuery PHP：http://www.sitepoint.com/forums/showthread.php?650046-Passing-Jquery-Var-To-Php-Mysql-Query

希望這可以幫助你！

編輯DUE TO的第一個評論對這個職位：

當你點擊，並給它一個風格與它一起就這樣你可以簡單地添加新的圖像：

$("#imageDiv").click(function (e) { 
    $(this).addImage($(this), e.pageX, e.pageY); 
}); 


function addImage(object, xPos, yPos){ 
    object.append("<img src='markerImg.png' style='position:absolute; left:"+xPos+"; top:"+yPos";' />");  
} 

PS ：你的對象div應該被設置爲position：relative &不確定這是否可行，這是在沒有測試代碼的情況下編寫的，可能需要一些更改！

Answer 3

試試這個 - 它非常簡單，但效果很好。

http://duncanheron.github.com/dropPin/

您需要定製適合您的需求，但對於加針座標到圖像的總體思路是存在的。