移動使用Jquery創建的div

Question

我真正想要的是能夠點擊新創建的div，然後點擊屏幕上的其他位置並讓div移動到那裏。

我的代碼：

$(function() { 
    $('a#linkA').click(function() { 
     $('#container') 
     .prepend("<div id='cloneA' onclick='moveA();'> <img src='A.gif' alt='A' </div>") 
    }); 
}); 

function moveA(event) { 
    var posx = event.pageX; //get the mouse's x coord 
    var posy = event.pageY; //get the mouse's y coord 
    document.getElementById("cloneA").style.left = posx; 
    document.getElementById("cloneA").style.top = posy; 

當我運行這在Firefox和使用Firebug，它說「的document.getElementById（」 cloneA「）沒有被定義style.left ......這是爲什麼和我能做些什麼讓這個做我想要什麼？ 謝謝！

Answer 1

你有幾個不同的問題：一，你不及格的事件moveA(event)。此外，當您設置left和top，您需要將尺寸類型添加到您設置的值left和top至（px，%）。並且，要設置left和top，您需要一個position: absolute或position: relative以使#moveA移動到該位置。

此外，如果您要添加多個#moveA img's，您應該爲這些元素的ID屬性添加一個唯一編號。

$(function() { 
    var $container = $('#container'); 
    $container.data('count', 0); 
    $('a#linkA').click(function() { 
     var img = 'http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=64&'; 
     var id = "cloneA"+$container.data('count'); 
     $container.prepend("<div id='"+id+"'><img src='"+img+"' alt='A'/></div>"); 
     $container.data('count',$container.data('count')+1); 
     $('#'+id).click(function(event){ 
      moveA(event); 
     }); 
    }); 
}); 

function moveA(event) { 
    var posx = event.pageX; //get the mouse's x coord 
    var posy = event.pageY; //get the mouse's y coord 
    var div = event.currentTarget.id; 
    document.getElementById(div).style.position = 'relative'; 
    document.getElementById(div).style.left = posx+'px'; 
    document.getElementById(div).style.top = posy+'px'; 
} 

http://jsfiddle.net/WkkCE/