Moving an image in a div and wrapping text

Question

So, I was browsing web pages and various JavaScript sites, as well as browsing JavaScript and apis. my ultimate goal is to have a drag-and-drop image similar to jQuery, drag and drop into a div full of text, and wrap text around it. Is there a library or api that has this functionally or somewhere to jump off? I am currently using jQuery for sorting to help with moving the div, but just don't have the ability to move the images inside the div.

Thanks for your time, -D

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

Answer 1

You can try using an editor like CkEditor or TinyMCE, and then combine it with the jquery drag and drop function.

Turn on dropwise the corresponding editor event to add the image to the caret point.

Answer 2

can compile some kind of jqueryui draggable / droppable and jqslickwrap hybrid

Answer 3

I found an interesting thing for my blog and made some traces and mistakes. if anyone can make a jquery plugin out of it ?! Images and text must be inside the div. See how it works here .

1. Words have no coordinates, so you need to wrap each word with an html tag. This greatly increases the text.

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. Put your image. 3. Set the coordinates and size of the div for the image and declare a few 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. Go through each word tag. Find the word that appears in the image. Calculate the distance from the end of the word to the right edge of the image and place a div with a certain width as the 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 wrappers upon completion.

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