Переместить div, который был создан с помощью Jquery

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, вы действительно должны добавить уникальный номер к атрибуту 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/