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

Question

我正在处理移动图像，但可以有文本和其他图像，我也不能使用插入符号。那么如何使用鼠标/点击事件在当前鼠标位置插入节点呢？

我创建了一个小提琴

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

http://jsfiddle.net/D9nEw/

此外，图像应成为文本的一部分。我的意思是，无论在哪里插入图像，内容都不应该在图像下方，而应该沿着图像旁边移动。

Answer 1

示例实现：演示。

采取的步骤：

1. 将类添加到movable图像以识别它class="movable"
2. 使用此图像作为光标：$('img.mover')
3. 在 click 上，将img的clone添加到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，但该元素将相对于具有position: relative的最接近的父元素放置（在这种情况下是body）。