单击时在文本之间插入图像节点

Question

我正在研究移动图像，但也可能有文字和其他图像，我也不能使用插入符号。那么如何使用鼠标/ tap事件将节点插入当前鼠标位置？

我创造了一个小提琴

    $("#box").mousemove(function(event) {
  $('img').css('left',event.pageX-20);
  $('img').css('top',event.pageY-20);
});

http://jsfiddle.net/D9nEw/

此外，图像应成为文本的一部分。我的意思是在插入图像的地方，内容不应该在图像下面，而是沿着图像移动。

Answer 1

示例实施：Demo。

采取的步骤：

1. 在movable图片中添加一个类以识别它class="movable"
2. 将此图片用作光标：$('img.mover')
3. 在click上，将clone img添加到body并使用event.pageX，event.pageY设置其位置，然后移除课程mover：

$('#box').click(function(ev){
 $('img.mover').clone()
  .removeClass('mover')
  .appendTo('body')
  .css('display', 'absolute')
  .css('left', ev.pageX-20)
  .css('top', ev.pageY-20);
 });

您可以将img的克隆添加到body或#box，但该元素将 relative 放置到最近的父级{{}} {1}}（在这种情况下是position: relative）。