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/

移动使用Jquery创建的div

1 个答案: