移动使用 Jquery 创建的 div

发布于 2024-12-11 11:19:23 字数 652 浏览 0 评论 0原文

我真正想要的是能够单击新创建的 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 未定义...为什么会这样，我该怎么做才能让它执行我的操作想？谢谢！

原文

What I really want is to be able to click on the newly created div then click somewhere else on the screen and have the div move there.

My code:

$(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;

When I run this in firefox and use firebug, it says "document.getElementByID("cloneA").style.left isn't defined...Why is that and what can I do to get this to do what I want?
Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

乱世争霸 2024-12-18 11:19:23

你有几个不同的问题。第一，您没有将事件传递给 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/

You've got a couple of different issues. One, you're not passing an event to moveA(event). Also, when you set the left and top, you need to add a type of dimension to the value you set left and top to (px, %). And, to set the left and top, you need a position: absolute or a position: relative to make the #moveA move to that position.

Additionally, if you're going to add multiple #moveA img's, you should really append a unique number to those element's ID attribute.

$(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/

回复收藏 0 原文

~没有更多了~