Question

所以我一直在搜索互联网和各种JavaScript网站，以及查看JavaScript语言和apis。我的最终目标是能够拥有一个可拖动的图像，就像JQuery的拖放到一个充满文本的div并且文本环绕它。是否有一个库或api具有此功能或某处可跳转？我目前正在使用JQuery的sortable来帮助移动div，但是缺乏在div中移动图像的能力。

感谢您的时间， -D

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

Answer 1

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

在drop上触发相应的编辑器事件，以在插入点处添加图像。

Answer 2

可能能够烹饪某种jqueryui draggable / droppable＆amp; jqslickwrap混合

Answer 3

我发现这对我的博客来说很有趣，并且发现了一些小道和错误。如果有人可以从它做一个jquery插件？！图像和文本应该在div中。看到它正常工作here。

1.Words没有坐标，所以你必须用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的坐标和大小，并声明一些变量。

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.浏览每个单词标签。找到突出到图像中的单词。计算从单词结尾到图像右边缘的距离，并将具有特定宽度的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();
            });

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

3 个答案: