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でこれを実行し、放火犯を使用する場合、それは「のdocument.getElementById（」クロニィ」）と言うstyle.leftが定義されていない...なぜそれがあると私は私がやりたい、これを取得するために何ができるのでしょうか？ ありがとう！

あなたが持っている

Answer 1

さまざまな問題のカップル。一つは、あなたがmoveA(event)にイベントを渡していない。また、あなたが設定したときにleftとtopに設定すると、leftとtopを（）に設定した値にディメンションタイプを追加する必要があります,%）。 leftとtopを設定するには、#moveAをその位置に移動させるにはposition: absoluteまたはposition: relativeが必要です。

さらに、複数の#moveA imgを追加する場合は、その要素の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/