Блог

Чего я действительно хочу, так это иметь возможность щелкнуть по вновь созданному 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 не определено…Почему это так и что я могу сделать, чтобы заставить это делать то, что я хочу?
Спасибо!

У вас есть несколько разных проблем. Во-первых, вы не передаете событие moveA(event) кому-либо другому. Кроме того, когда вы устанавливаете left и top , вам нужно добавить тип измерения к заданному вами значению left и top ( px , % ) . И, чтобы установить left и top , вам нужно a position: absolute или a position: relative для #moveA перемещения в эту позицию.

Кроме того, если вы собираетесь добавить несколько #moveA img , вам действительно следует добавить уникальный номер к ID атрибуту этого элемента.

 $(function() {
   var $container = $('#container');
   $container.data('count', 0);
   $('a#linkA').click(function() {
      var img = 'http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=64amp;';
      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/