Moving an image into a div, and having text wrap around

Question

So I have been scouring the inter webs and various JavaScript site, along with looking through the JavaScript language and apis as well. my end goal is to be able to have a dragable image much like JQuery's drag and drop into a div full of text and having text wrap around it. Is there a library or a api that has this functionally or somewhere to jump off? I am currently using JQuery's sortable to help with moving divs but just lack the ability to move images within the divs.

Thank you for your time, -D

just for reference, http://jqueryui.com/demos/sortable/#portlets

Answer 1

You could try using an editor like CkEditor or TinyMCE then combine it with jquery drag/drop functionality.

On drop trigger the appropriate editor event to add the image at the caret point.

Answer 2

I found that an interesting thing for my blog and made some trails and errors. if anyone could make a jquery plugin from it?! Images and text should be inside a div. See it working here .

1.Words don't have coordinates, so you have to wrap each word with a html-tag. This increase the text a lot!!!

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.Place your image. 3.Get the coordinates and size of the div for the image and declare some 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.Walk through each word tag. Find word which protrude into the image. Calculate the distance from the end of the word before to the right edge of the image and place a div with the specific width as a place holder.

$("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.Clean text from word wraps when finished.

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

Answer 3

也许能够煮出某种jqueryui可拖动/可拖放和jqslickwrap混合