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

Question

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

我创造了一个小提琴

    $("#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，但该元素将相对于最近的父级position: relative（body在本例中为 ）放置。