Verschieben eines Bildes in ein div, und mit Text umbrechen

Question

Also habe ich die inter-Webs und verschiedene JavaScript-Website, zusammen mit der Suche durch die JavaScript-Sprache und apis als auch durchforstet. mein Endziel ist in der Lage sein, ein Dragable-Bild ähnlich wie JQuery Drag and Drop in ein Div voller Text und mit Text um ihn herum zu haben. Gibt es eine Bibliothek oder eine API, die dies funktional oder irgendwo zu springen aus? Ich bin derzeit mit JQuery sortable zu helfen, mit dem Verschieben von divs aber nur die Fähigkeit, Bilder innerhalb der divs zu bewegen fehlt.

Ich danke Ihnen für Ihre Zeit, -D

nur zur Information, http://jqueryui.com/demos/sortable/#portlets

Answer 1

Sie könnten versuchen, mit einem Editor wie CkEditor oder TinyMCE dann kombinieren Sie es mit Jquery Drag / Drop-Funktionalität.

Beim Ablegen wird das entsprechende Editor-Ereignis ausgelöst, um das Bild an der Einfügemarke hinzuzufügen.

Answer 2

Könnte in der Lage sein, eine Art jqueryui draggable/droppable zu erstellen & jqslickwrap hybrid

Answer 3

Ich fand das eine interessante Sache für meinen Blog und machte einige Spuren und Fehler. wenn jemand ein Jquery-Plugin daraus machen könnte?! Bilder und Text sollten innerhalb eines div. Sehen Sie, wie es funktioniert aquí .

1. die Wörter haben keine Koordinaten, also muss man jedes Wort mit einem html-Tag umschließen. Dadurch wird der Text sehr viel länger!!!

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. platzieren Sie Ihr Bild. 3. die Koordinaten und die Größe der div für das Bild und deklarieren einige 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;

Gehen Sie durch jede Wortmarke. Finden Sie das Wort, das in das Bild hineinragt. Berechnen Sie den Abstand zwischen dem Ende des Wortes und dem rechten Rand des Bildes und platzieren Sie ein Div mit der entsprechenden Breite als Platzhalter.

$("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. nach Beendigung der Arbeit den Text aus den Zeilenumbrüchen entfernen.

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