将图像移动到 div 中，并让文本环绕答案

【问题标题】：Moving an image into a div, and having text wrap around将图像移动到 div 中，并让文本环绕
【发布时间】：2011-06-19 14:54:43
【问题描述】：

所以我一直在搜索互联网和各种 JavaScript 网站，同时还浏览了 JavaScript 语言和 API。我的最终目标是能够拥有一个可拖动的图像，就像 JQuery 的拖放到一个充满文本的 div 中并让文本环绕它。是否有一个库或 api 具有此功能或某个地方可以跳出？我目前正在使用 JQuery 的 sortable 来帮助移动 div，但只是缺乏在 div 内移动图像的能力。

感谢您的宝贵时间， -D

仅供参考， http://jqueryui.com/demos/sortable/#portlets

【问题讨论】：

有没有一种方法很像 TinyMCE (tinymce.moxiecode.com/tryit/full.php)，在文本区域中，JavaScript 可以检测到我在哪一行？如果是这样，那么我可以单击以编辑和拖动图片，它会对齐线条。到目前为止，我正在使用 jeditable (appelsiini.net/jeditable) 作为我的动态文本编辑区域。

标签： javascript jquery css web-applications

【解决方案1】：

也许能够制作出某种 jqueryui 可拖动/可拖放和jqslickwraphybrid

【讨论】：

不太担心实际包裹，因为图片大小和整体形状未知，无所谓。我更期待移动图像，它不仅仅是一个不会增加可用性的浮动 div。

【解决方案2】：

您可以尝试使用像 CkEditor 或 TinyMCE 这样的编辑器，然后将其与 jquery 拖放功能结合使用。

在放置时触发相应的编辑器事件以在插入点添加图像。

【讨论】：

我喜欢你的想法，我目前正在使用 appelsiini.net/jeditable 进行即时文本编辑，不想问另一个问题，但有没有像 TinyMCE 一样的方法，在文本区域中 JavaScript 可以检测我在哪条线上？如果是这样，那么我可以通过单击来编辑和拖动图片，然后它会对齐线条。

【解决方案3】：

我发现这对我的博客来说是一件有趣的事情，并犯了一些错误。如果有人可以用它制作一个 jquery 插件？！图像和文本应该在一个 div 中。看到它工作here。

1.单词没有坐标，所以你必须用一个html标签来包装每个单词。这增加了很多文字！！！

var text=$('div#text').text();
var arr=text.split(" ");
for(var i=0;i<arr.length;i++){
   arr[i]="<span id='t'>"+arr[i]+"</span>";
   }
text=arr.join(" ");
$('div#text').html(function(){return text;});

2.放置您的图像。 3.获取图片的div的坐标和大小，并声明一些vars。

var temp=$("div#img");
var pos=temp.offset();
var imgleft=parseInt(pos.left);
var imgtop=parseInt(pos.top);
var imgwidth=temp.width();
var imgheight=temp.height();
var latesttop=$("div#text").offset().top;
var spanleft,spantop,spanwidth,spanheight,latestleft,latestwidth;

4.遍历每个单词标签。找到突出到图像中的单词。计算before单词结尾到图片右边缘的距离，放置一个特定宽度的div作为占位符。

$("span#t").each(function(index){
            pos=$(this).offset();
            spanleft=parseInt(pos.left);
            spantop=parseInt(pos.top);
            spanwidth=$(this).width();
            spanheight=$(this).height();
            if(spantop+spanheight>imgtop 
            && spantop<imgtop+imgheight 
            && spanleft+spanwidth>imgleft
            && spanleft<imgleft+imgwidth){
              if(latesttop!=spantop){ 
                latestleft=0;
                latestwidth=0;
                }
              var spacewidth=15+imgwidth+imgleft-latestleft-latestwidth;
              $(this).before("<div id='t' style='display:inline-block;width:"+spacewidth+"px'></div>");
              }
            latesttop=spantop;  
            latestleft=spanleft;
            latestwidth=spanwidth;     
            });

5.完成后从自动换行中清除文本。

$('span#t').replaceWith(function(){
            return $(this).contents();
            });

【讨论】：